/* ============================================
   智家168 门户网站 - 全局样式
   默认主题：浅蓝色
   支持主题：浅蓝、浅色、浅粉、深色
   ============================================ */

/* ========== CSS变量 - 浅蓝主题（默认） ========== */
:root {
    /* 主色调 */
    --primary: #4A90D9;             /* 主蓝色 */
    --primary-light: #6BA5E7;       /* 浅蓝高亮 */
    --primary-dark: #3A7BC8;        /* 深蓝按下 */
    /* 背景色 */
    --bg-main: #EBF2FA;             /* 页面主背景 */
    --bg-card: #FFFFFF;             /* 卡片背景 */
    --bg-header: #FFFFFF;           /* 顶栏背景 */
    --bg-input: #F5F8FC;            /* 输入框背景 */
    --bg-hover: #D6E6F5;            /* 悬停背景 */
    /* 文字色 */
    --text-primary: #1A2B3C;        /* 主文字 */
    --text-secondary: #5A6B7C;      /* 次要文字 */
    --text-placeholder: #9AABB8;    /* 占位符文字 */
    /* 边框和阴影 */
    --border: #D0DDE8;              /* 边框色 */
    --shadow: rgba(74, 144, 217, 0.1); /* 阴影色 */
    --shadow-hover: rgba(74, 144, 217, 0.2); /* 悬停阴影 */
    /* 消息气泡 */
    --msg-user: #4A90D9;            /* 用户消息背景 */
    --msg-user-text: #FFFFFF;       /* 用户消息文字 */
    --msg-ai: #F0F5FB;              /* AI消息背景 */
    --msg-ai-text: #1A2B3C;         /* AI消息文字 */
    /* 圆角 */
    --radius: 12px;                 /* 通用圆角 */
    --radius-sm: 8px;               /* 小圆角 */
    --radius-lg: 16px;              /* 大圆角 */
}

/* ========== 浅色主题 ========== */
[data-theme="light"] {
    --primary: #6B7280;
    --primary-light: #9CA3AF;
    --primary-dark: #4B5563;
    --bg-main: #F9FAFB;
    --bg-card: #FFFFFF;
    --bg-header: #FFFFFF;
    --bg-input: #F3F4F6;
    --bg-hover: #E5E7EB;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --text-placeholder: #9CA3AF;
    --border: #E5E7EB;
    --shadow: rgba(0, 0, 0, 0.05);
    --shadow-hover: rgba(0, 0, 0, 0.1);
    --msg-user: #4B5563;
    --msg-user-text: #FFFFFF;
    --msg-ai: #F3F4F6;
    --msg-ai-text: #111827;
}

/* ========== 浅粉主题 ========== */
[data-theme="light-pink"] {
    --primary: #E8729A;
    --primary-light: #F09DB8;
    --primary-dark: #D45A85;
    --bg-main: #FDF2F5;
    --bg-card: #FFFFFF;
    --bg-header: #FFFFFF;
    --bg-input: #FEF7F9;
    --bg-hover: #FBDCE6;
    --text-primary: #3C1A2B;
    --text-secondary: #7C5A6B;
    --text-placeholder: #C09AAB;
    --border: #F0D0DC;
    --shadow: rgba(232, 114, 154, 0.1);
    --shadow-hover: rgba(232, 114, 154, 0.2);
    --msg-user: #E8729A;
    --msg-user-text: #FFFFFF;
    --msg-ai: #FEF0F4;
    --msg-ai-text: #3C1A2B;
}

/* ========== 深色主题 ========== */
[data-theme="dark"] {
    --primary: #6BA5E7;
    --primary-light: #8DBCF0;
    --primary-dark: #5A94D6;
    --bg-main: #1A1D23;
    --bg-card: #252830;
    --bg-header: #21242B;
    --bg-input: #2A2D35;
    --bg-hover: #32363F;
    --text-primary: #E8ECF1;
    --text-secondary: #9AA3B0;
    --text-placeholder: #5A6370;
    --border: #363A43;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-hover: rgba(0, 0, 0, 0.5);
    --msg-user: #4A7FBF;
    --msg-user-text: #FFFFFF;
    --msg-ai: #2A2D35;
    --msg-ai-text: #E8ECF1;
}

/* ========== 全局重置 ========== */
* {
    margin: 0;                      /* 清除外边距 */
    padding: 0;                     /* 清除内边距 */
    box-sizing: border-box;         /* 盒模型用border-box */
}

/* ========== 页面主体 ========== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 系统字体栈 */
    background-color: var(--bg-main);   /* 主背景色 */
    color: var(--text-primary);         /* 主文字色 */
    min-height: 100vh;                  /* 最小高度占满视口 */
    display: flex;                      /* 弹性布局 */
    flex-direction: column;             /* 垂直排列 */
    transition: background-color 0.3s, color 0.3s; /* 主题切换过渡动画 */
}

/* ========== 顶部导航栏 ========== */
.header {
    display: flex;                      /* 水平弹性布局 */
    align-items: center;                /* 垂直居中 */
    justify-content: space-between;     /* 两端对齐 */
    padding: 12px 24px;                 /* 内边距 */
    background: var(--bg-header);       /* 背景色 */
    border-bottom: 1px solid var(--border); /* 底部边框 */
    box-shadow: 0 1px 3px var(--shadow);    /* 底部阴影 */
    position: sticky;                   /* 吸顶 */
    top: 0;                             /* 顶部对齐 */
    z-index: 100;                       /* 层级最高 */
}

/* 顶栏左侧 */
.header-left {
    display: flex;                      /* 水平排列 */
    align-items: center;                /* 垂直居中 */
    gap: 12px;                          /* 元素间距 */
}

/* Logo文字 */
.logo {
    font-size: 20px;                    /* 字号 */
    font-weight: 700;                   /* 粗体 */
    color: var(--primary);              /* 主色调 */
}

/* 副标题 */
.subtitle {
    font-size: 13px;                    /* 小字号 */
    color: var(--text-secondary);       /* 次要颜色 */
}

/* 顶栏右侧 */
.header-right {
    display: flex;                      /* 水平排列 */
    align-items: center;                /* 垂直居中 */
    gap: 10px;                          /* 元素间距 */
}

/* 返回按钮 */
.back-btn {
    display: flex;                      /* 弹性布局 */
    align-items: center;                /* 垂直居中 */
    justify-content: center;            /* 水平居中 */
    width: 36px;                        /* 固定宽度 */
    height: 36px;                       /* 固定高度 */
    border-radius: var(--radius-sm);    /* 圆角 */
    color: var(--text-primary);         /* 文字色 */
    text-decoration: none;              /* 去掉下划线 */
    transition: background 0.2s;        /* 背景过渡 */
}

/* 返回按钮悬停效果 */
.back-btn:hover {
    background: var(--bg-hover);        /* 悬停背景 */
}

/* ========== 下拉选择框通用样式 ========== */
.theme-select,
.model-select {
    padding: 6px 12px;                  /* 内边距 */
    border: 1px solid var(--border);    /* 边框 */
    border-radius: var(--radius-sm);    /* 圆角 */
    background: var(--bg-input);        /* 背景 */
    color: var(--text-primary);         /* 文字色 */
    font-size: 13px;                    /* 字号 */
    cursor: pointer;                    /* 鼠标指针 */
    outline: none;                      /* 去掉聚焦轮廓 */
    transition: border-color 0.2s;      /* 边框过渡 */
}

/* 下拉框聚焦样式 */
.theme-select:focus,
.model-select:focus {
    border-color: var(--primary);       /* 聚焦时边框变主色 */
}

/* 新建对话按钮 */
.new-chat-btn {
    display: flex;                      /* 弹性布局 */
    align-items: center;                /* 垂直居中 */
    gap: 4px;                           /* 图标与文字间距 */
    padding: 6px 14px;                  /* 内边距 */
    border: 1px solid var(--border);    /* 边框 */
    border-radius: var(--radius-sm);    /* 圆角 */
    background: var(--bg-input);        /* 背景 */
    color: var(--text-primary);         /* 文字色 */
    font-size: 13px;                    /* 字号 */
    cursor: pointer;                    /* 鼠标指针 */
    transition: background 0.2s, border-color 0.2s; /* 过渡动画 */
}

/* 新建对话按钮悬停 */
.new-chat-btn:hover {
    background: var(--bg-hover);        /* 悬停背景 */
    border-color: var(--primary);       /* 边框变主色 */
}

/* ========== 首页主体内容 ========== */
.main-content {
    flex: 1;                            /* 占据剩余空间 */
    display: flex;                      /* 弹性布局 */
    flex-direction: column;             /* 垂直排列 */
    align-items: center;                /* 水平居中 */
    padding: 32px 24px;                 /* 内边距 */
    max-width: 900px;                   /* 最大宽度 */
    margin: 0 auto;                     /* 水平居中 */
    width: 100%;                        /* 宽度100% */
}

/* ========== 仪表盘统计区域 ========== */
.dashboard-section {
    width: 100%;                        /* 满宽 */
    margin-bottom: 36px;                /* 底部间距 */
}

/* 统计卡片网格 */
.stats-grid {
    display: grid;                      /* 网格布局 */
    grid-template-columns: repeat(4, 1fr); /* 4列等宽 */
    gap: 16px;                          /* 卡片间距 */
}

/* 统计卡片 */
.stat-card {
    background: var(--bg-card);         /* 卡片背景 */
    border: 1px solid var(--border);    /* 边框 */
    border-radius: var(--radius);       /* 圆角 */
    padding: 20px 16px;                 /* 内边距 */
    text-align: center;                 /* 文字居中 */
    box-shadow: 0 1px 4px var(--shadow); /* 轻阴影 */
}

/* 统计数字 */
.stat-number {
    font-size: 28px;                    /* 大字号 */
    font-weight: 700;                   /* 粗体 */
    color: var(--primary);              /* 主色调 */
    margin-bottom: 4px;                 /* 底部间距 */
}

/* 运行中状态特殊样式 */
.stat-online {
    font-size: 18px;                    /* 稍小字号 */
    color: #22C55E;                     /* 绿色表示正常 */
}

/* 统计标签 */
.stat-label {
    font-size: 13px;                    /* 小字号 */
    color: var(--text-secondary);       /* 次要颜色 */
}

/* ========== 聊天输入框容器 ========== */
.chat-input-container {
    display: flex;                      /* 水平排列 */
    align-items: flex-end;              /* 底部对齐 */
    gap: 8px;                           /* 间距 */
    background: var(--bg-card);         /* 卡片背景 */
    border: 1px solid var(--border);    /* 边框 */
    border-radius: var(--radius-lg);    /* 大圆角 */
    padding: 12px 16px;                 /* 内边距 */
    box-shadow: 0 2px 8px var(--shadow); /* 阴影 */
    transition: border-color 0.2s, box-shadow 0.2s; /* 过渡 */
}

/* 输入框容器聚焦效果 */
.chat-input-container:focus-within {
    border-color: var(--primary);       /* 聚焦时边框变主色 */
    box-shadow: 0 4px 16px var(--shadow-hover); /* 加大阴影 */
}

/* 聊天输入框 */
.chat-input {
    flex: 1;                            /* 占满剩余空间 */
    border: none;                       /* 无边框 */
    outline: none;                      /* 无轮廓 */
    background: transparent;            /* 透明背景 */
    color: var(--text-primary);         /* 文字色 */
    font-size: 15px;                    /* 字号 */
    line-height: 1.5;                   /* 行高 */
    resize: none;                       /* 禁止手动拉伸 */
    max-height: 150px;                  /* 最大高度（防止无限增长） */
    font-family: inherit;               /* 继承字体 */
}

/* 输入框占位符 */
.chat-input::placeholder {
    color: var(--text-placeholder);     /* 占位符颜色 */
}

/* 发送按钮 */
.send-btn {
    display: flex;                      /* 弹性布局 */
    align-items: center;                /* 居中 */
    justify-content: center;            /* 居中 */
    width: 40px;                        /* 固定宽度 */
    height: 40px;                       /* 固定高度 */
    border: none;                       /* 无边框 */
    border-radius: 50%;                 /* 圆形 */
    background: var(--primary);         /* 主色背景 */
    color: white;                       /* 白色图标 */
    cursor: pointer;                    /* 鼠标指针 */
    transition: background 0.2s, transform 0.1s; /* 过渡动画 */
    flex-shrink: 0;                     /* 不缩小 */
}

/* 发送按钮悬停 */
.send-btn:hover {
    background: var(--primary-dark);    /* 深色背景 */
}

/* 发送按钮按下 */
.send-btn:active {
    transform: scale(0.95);             /* 缩小反馈 */
}

/* ========== 功能卡片区域 ========== */
.tools-section {
    width: 100%;                        /* 满宽 */
    max-width: 680px;                   /* 最大宽度 */
}

/* 区域标题 */
.section-title {
    font-size: 16px;                    /* 字号 */
    font-weight: 600;                   /* 半粗体 */
    color: var(--text-secondary);       /* 次要颜色 */
    margin-bottom: 16px;                /* 底部间距 */
}

/* 卡片网格 */
.tools-grid {
    display: grid;                      /* 网格布局 */
    grid-template-columns: repeat(4, 1fr); /* 4列等宽 */
    gap: 16px;                          /* 卡片间距 */
}

/* 工具卡片 */
.tool-card {
    display: flex;                      /* 弹性布局 */
    flex-direction: column;             /* 垂直排列 */
    align-items: center;                /* 水平居中 */
    padding: 20px 12px;                 /* 内边距 */
    background: var(--bg-card);         /* 卡片背景 */
    border: 1px solid var(--border);    /* 边框 */
    border-radius: var(--radius);       /* 圆角 */
    text-decoration: none;              /* 去掉链接下划线 */
    color: var(--text-primary);         /* 文字色 */
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; /* 过渡 */
    cursor: pointer;                    /* 鼠标指针 */
}

/* 卡片悬停效果 */
.tool-card:hover {
    transform: translateY(-2px);        /* 上移2px */
    box-shadow: 0 4px 12px var(--shadow-hover); /* 加大阴影 */
    border-color: var(--primary);       /* 边框变主色 */
}

/* 占位卡片（未上线功能） */
.tool-card-placeholder {
    opacity: 0.5;                       /* 半透明 */
    cursor: default;                    /* 默认鼠标 */
}

/* 占位卡片不响应悬停 */
.tool-card-placeholder:hover {
    transform: none;                    /* 不上移 */
    box-shadow: none;                   /* 不加阴影 */
    border-color: var(--border);        /* 保持原边框 */
}

/* 卡片图标 */
.tool-icon {
    font-size: 32px;                    /* 大图标 */
    margin-bottom: 8px;                 /* 底部间距 */
}

/* 卡片名称 */
.tool-name {
    font-size: 14px;                    /* 字号 */
    font-weight: 600;                   /* 半粗体 */
    margin-bottom: 4px;                 /* 底部间距 */
    text-align: center;                 /* 居中 */
}

/* 卡片描述 */
.tool-desc {
    font-size: 12px;                    /* 小字号 */
    color: var(--text-secondary);       /* 次要颜色 */
    text-align: center;                 /* 居中 */
}

/* ========== 底部信息栏 ========== */
.footer {
    text-align: center;                 /* 居中 */
    padding: 16px;                      /* 内边距 */
    font-size: 12px;                    /* 小字号 */
    color: var(--text-secondary);       /* 次要颜色 */
    border-top: 1px solid var(--border); /* 顶部边框 */
}

/* ========== 聊天页面专用样式 ========== */

/* 聊天页面body */
.chat-page {
    height: 100vh;                      /* 占满视口高度 */
    overflow: hidden;                   /* 禁止页面滚动 */
}

/* 聊天主体 */
.chat-main {
    flex: 1;                            /* 占据剩余空间 */
    overflow-y: auto;                   /* 垂直滚动 */
    padding: 20px;                      /* 内边距 */
}

/* 消息列表 */
.chat-messages {
    max-width: 768px;                   /* 最大宽度 */
    margin: 0 auto;                     /* 水平居中 */
    display: flex;                      /* 弹性布局 */
    flex-direction: column;             /* 垂直排列 */
    gap: 16px;                          /* 消息间距 */
}

/* 欢迎聊天（空对话提示） */
.welcome-chat {
    text-align: center;                 /* 居中 */
    padding: 60px 20px;                 /* 大内边距 */
    color: var(--text-secondary);       /* 次要颜色 */
}

/* 欢迎聊天标题 */
.welcome-chat h2 {
    font-size: 24px;                    /* 字号 */
    margin-bottom: 8px;                 /* 底部间距 */
    color: var(--text-primary);         /* 主文字色 */
}

/* 消息行 */
.message-row {
    display: flex;                      /* 水平排列 */
    gap: 12px;                          /* 间距 */
    max-width: 85%;                     /* 最大宽度（不占满） */
}

/* 用户消息靠右 */
.message-row.user {
    align-self: flex-end;               /* 右对齐 */
    flex-direction: row-reverse;        /* 反向排列 */
}

/* AI消息靠左 */
.message-row.ai {
    align-self: flex-start;             /* 左对齐 */
}

/* 消息气泡 */
.message-bubble {
    padding: 10px 16px;                 /* 内边距 */
    border-radius: var(--radius);       /* 圆角 */
    line-height: 1.6;                   /* 行高 */
    font-size: 14px;                    /* 字号 */
    word-break: break-word;             /* 长单词换行 */
    white-space: pre-wrap;              /* 保留空格和换行 */
}

/* 用户消息气泡样式 */
.message-row.user .message-bubble {
    background: var(--msg-user);        /* 用户消息背景 */
    color: var(--msg-user-text);        /* 用户消息文字色 */
    border-bottom-right-radius: 4px;    /* 右下角小圆角（气泡尾巴效果） */
}

/* AI消息气泡样式 */
.message-row.ai .message-bubble {
    background: var(--msg-ai);          /* AI消息背景 */
    color: var(--msg-ai-text);          /* AI消息文字色 */
    border-bottom-left-radius: 4px;     /* 左下角小圆角 */
}

/* 加载动画（AI思考中） */
.loading-dots {
    display: inline-flex;               /* 行内弹性 */
    gap: 4px;                           /* 点间距 */
    padding: 4px 0;                     /* 上下内边距 */
}

/* 加载动画的每个点 */
.loading-dots span {
    width: 8px;                         /* 点宽度 */
    height: 8px;                        /* 点高度 */
    border-radius: 50%;                 /* 圆形 */
    background: var(--text-secondary);  /* 点颜色 */
    animation: dot-bounce 1.4s infinite ease-in-out; /* 弹跳动画 */
}

/* 第二个点延迟0.2秒 */
.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

/* 第三个点延迟0.4秒 */
.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* 弹跳动画关键帧 */
@keyframes dot-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);          /* 缩小 */
        opacity: 0.4;                   /* 半透明 */
    }
    40% {
        transform: scale(1);            /* 原始大小 */
        opacity: 1;                     /* 不透明 */
    }
}

/* ========== 底部输入栏（聊天页面） ========== */
.chat-input-bar {
    padding: 12px 20px 20px;            /* 内边距 */
    background: var(--bg-main);         /* 背景 */
    border-top: 1px solid var(--border); /* 顶部边框 */
}

/* 聊天页面的输入容器居中 */
.chat-input-bar .chat-input-container {
    max-width: 768px;                   /* 与消息区同宽 */
    margin: 0 auto;                     /* 居中 */
}

/* ========== 响应式布局 ========== */

/* 平板及以下（宽度小于768px） */
@media (max-width: 768px) {
    /* 卡片改为2列 */
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* 减小欢迎标题 */
    .welcome-title {
        font-size: 22px;
    }
    /* 减小内边距 */
    .main-content {
        padding: 24px 16px;
    }
}

/* 手机（宽度小于480px） */
@media (max-width: 480px) {
    /* 卡片改为1列 */
    .tools-grid {
        grid-template-columns: 1fr;
    }
    /* 顶栏内边距缩小 */
    .header {
        padding: 10px 12px;
    }
    /* 统计卡片改为2列 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== 导航栏扩展（用户信息、管理入口） ========== */

/* 导航链接 */
.nav-link {
    font-size: 13px;                    /* 字号 */
    color: var(--text-secondary);       /* 次要颜色 */
    text-decoration: none;              /* 无下划线 */
    padding: 4px 8px;                   /* 内边距 */
    border-radius: var(--radius-sm);    /* 圆角 */
    transition: color 0.2s, background 0.2s; /* 过渡 */
}

/* 导航链接悬停 */
.nav-link:hover {
    color: var(--primary);              /* 主色文字 */
    background: var(--bg-hover);        /* 悬停背景 */
}

/* 退出链接特殊样式 */
.logout-link {
    color: #EF4444;                     /* 红色 */
}

/* 退出链接悬停 */
.logout-link:hover {
    background: #FEE2E2;               /* 浅红背景 */
    color: #DC2626;                     /* 深红文字 */
}

/* 用户信息显示 */
.user-info {
    font-size: 13px;                    /* 字号 */
    font-weight: 600;                   /* 半粗体 */
    color: var(--primary);              /* 主色调 */
    padding: 4px 10px;                  /* 内边距 */
    background: var(--bg-input);        /* 背景色 */
    border-radius: var(--radius-sm);    /* 圆角 */
}

/* ========== 登录页面样式 ========== */

/* 登录页面背景 */
.login-page {
    display: flex;                      /* 弹性布局 */
    align-items: center;                /* 垂直居中 */
    justify-content: center;            /* 水平居中 */
    min-height: 100vh;                  /* 占满视口 */
    background: var(--bg-main);         /* 主背景 */
}

/* 登录容器 */
.login-container {
    width: 100%;                        /* 满宽 */
    max-width: 400px;                   /* 最大宽度 */
    padding: 0 20px;                    /* 水平内边距 */
}

/* 登录卡片 */
.login-card {
    background: var(--bg-card);         /* 卡片背景 */
    border: 1px solid var(--border);    /* 边框 */
    border-radius: var(--radius-lg);    /* 大圆角 */
    padding: 40px 32px;                 /* 内边距 */
    box-shadow: 0 4px 20px var(--shadow); /* 阴影 */
}

/* 登录头部 */
.login-header {
    text-align: center;                 /* 居中 */
    margin-bottom: 32px;                /* 底部间距 */
}

/* 登录Logo */
.login-logo {
    font-size: 28px;                    /* 大字号 */
    font-weight: 700;                   /* 粗体 */
    color: var(--primary);              /* 主色调 */
    margin-bottom: 4px;                 /* 底部间距 */
}

/* 登录副标题 */
.login-subtitle {
    font-size: 14px;                    /* 字号 */
    color: var(--text-secondary);       /* 次要颜色 */
}

/* 登录错误提示 */
.login-error {
    background: #FEE2E2;               /* 浅红背景 */
    color: #DC2626;                     /* 红色文字 */
    padding: 10px 14px;                 /* 内边距 */
    border-radius: var(--radius-sm);    /* 圆角 */
    font-size: 13px;                    /* 字号 */
    margin-bottom: 16px;               /* 底部间距 */
    text-align: center;                 /* 居中 */
}

/* 表单组 */
.form-group {
    margin-bottom: 16px;                /* 底部间距 */
}

/* 表单标签 */
.form-group label {
    display: block;                     /* 块级显示 */
    font-size: 13px;                    /* 字号 */
    font-weight: 600;                   /* 半粗体 */
    color: var(--text-primary);         /* 主文字色 */
    margin-bottom: 6px;                 /* 底部间距 */
}

/* 表单输入框 */
.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;                        /* 满宽 */
    padding: 10px 14px;                 /* 内边距 */
    border: 1px solid var(--border);    /* 边框 */
    border-radius: var(--radius-sm);    /* 圆角 */
    background: var(--bg-input);        /* 背景色 */
    color: var(--text-primary);         /* 文字色 */
    font-size: 14px;                    /* 字号 */
    outline: none;                      /* 无轮廓 */
    transition: border-color 0.2s;      /* 过渡 */
}

/* 输入框聚焦 */
.form-group input:focus {
    border-color: var(--primary);       /* 聚焦边框变主色 */
}

/* 输入框占位符 */
.form-group input::placeholder {
    color: var(--text-placeholder);     /* 占位符颜色 */
}

/* contenteditable模拟输入框（兼容中文IME） */
.editable-input {
    width: 100%;                        /* 满宽 */
    padding: 10px 14px;                 /* 内边距 */
    border: 1px solid var(--border);    /* 边框 */
    border-radius: var(--radius-sm);    /* 圆角 */
    background: var(--bg-input);        /* 背景色 */
    color: var(--text-primary);         /* 文字色 */
    font-size: 14px;                    /* 字号 */
    line-height: 1.5;                   /* 行高 */
    outline: none;                      /* 无轮廓 */
    transition: border-color 0.2s;      /* 过渡 */
    min-height: 20px;                   /* 最小高度 */
    word-break: break-all;              /* 长文本换行 */
}

/* contenteditable聚焦 */
.editable-input:focus {
    border-color: var(--primary);       /* 聚焦边框变主色 */
}

/* contenteditable占位符（空内容时显示） */
.editable-input:empty::before {
    content: attr(data-placeholder);    /* 读取data-placeholder属性 */
    color: var(--text-placeholder);     /* 占位符颜色 */
}

/* 原生密码输入框样式（与editable-input统一） */
.form-input-native {
    width: 100%;                        /* 满宽 */
    padding: 10px 14px;                 /* 内边距 */
    border: 1px solid var(--border);    /* 边框 */
    border-radius: var(--radius-sm);    /* 圆角 */
    background: var(--bg-input);        /* 背景色 */
    color: var(--text-primary);         /* 文字色 */
    font-size: 14px;                    /* 字号 */
    outline: none;                      /* 无轮廓 */
    transition: border-color 0.2s;      /* 过渡 */
}

/* 原生输入框聚焦 */
.form-input-native:focus {
    border-color: var(--primary);       /* 聚焦边框变主色 */
}

/* 原生输入框占位符 */
.form-input-native::placeholder {
    color: var(--text-placeholder);     /* 占位符颜色 */
}

/* 登录按钮 */
.login-btn {
    width: 100%;                        /* 满宽 */
    padding: 12px;                      /* 内边距 */
    background: var(--primary);         /* 主色背景 */
    color: white;                       /* 白色文字 */
    border: none;                       /* 无边框 */
    border-radius: var(--radius-sm);    /* 圆角 */
    font-size: 15px;                    /* 字号 */
    font-weight: 600;                   /* 半粗体 */
    cursor: pointer;                    /* 鼠标指针 */
    transition: background 0.2s;        /* 过渡 */
    margin-top: 8px;                    /* 顶部间距 */
}

/* 登录按钮悬停 */
.login-btn:hover {
    background: var(--primary-dark);    /* 深色背景 */
}

/* 错误图标 */
.error-icon {
    text-align: center;                 /* 居中 */
    font-size: 48px;                    /* 大字号 */
    margin-bottom: 16px;                /* 底部间距 */
}

/* ========== 管理页面样式 ========== */

/* 管理内容区域 */
.admin-content {
    padding: 24px;                      /* 内边距 */
    max-width: 1200px;                  /* 最大宽度 */
    margin: 0 auto;                     /* 居中 */
}

/* 管理区块 */
.admin-section {
    background: var(--bg-card);         /* 卡片背景 */
    border: 1px solid var(--border);    /* 边框 */
    border-radius: var(--radius);       /* 圆角 */
    padding: 24px;                      /* 内边距 */
    margin-bottom: 24px;                /* 底部间距 */
}

/* 创建用户表单行（水平排列） */
.form-row {
    display: flex;                      /* 水平排列 */
    gap: 16px;                          /* 间距 */
}

/* 表单行内的表单组等宽 */
.form-row .form-group {
    flex: 1;                            /* 等分宽度 */
}

/* 权限复选框容器（旧版兼容） */
.perm-checkboxes {
    display: flex;                      /* 水平排列 */
    flex-wrap: wrap;                    /* 换行 */
    gap: 12px;                          /* 间距 */
}

/* 权限面板（整块区域UI） */
.perm-panel {
    border: 1px solid var(--border);    /* 边框 */
    border-radius: var(--radius-sm);    /* 圆角 */
    overflow: hidden;                   /* 裁剪圆角 */
}

/* 权限面板头部（全选行） */
.perm-panel-header {
    padding: 8px 14px;                  /* 内边距 */
    background: var(--bg-input);        /* 灰色背景区分 */
    border-bottom: 1px solid var(--border); /* 底部分隔线 */
}

/* 权限面板主体 */
.perm-panel-body {
    padding: 12px 14px;                 /* 内边距 */
    display: flex;                      /* 水平排列 */
    flex-wrap: wrap;                    /* 换行 */
    gap: 16px;                          /* 间距 */
}

/* 特殊权限面板（橙色调） */
.perm-panel-special {
    border-color: #F59E0B;             /* 橙色边框 */
}

/* 特殊权限提示文字 */
.perm-hint {
    font-size: 11px;                    /* 小字号 */
    color: var(--text-placeholder);     /* 浅色 */
    margin-left: 2px;                   /* 左间距 */
}

/* 特殊权限标签 */
.perm-tag-special {
    background: #FEF3C7;               /* 浅黄背景 */
    color: #B45309;                     /* 深橙文字 */
}

/* 弹窗加宽 */
.modal-wide {
    min-width: 480px;                   /* 加宽最小宽度 */
}

/* 权限复选框标签 */
.perm-label {
    display: flex;                      /* 弹性布局 */
    align-items: center;                /* 垂直居中 */
    gap: 4px;                           /* 间距 */
    font-size: 13px;                    /* 字号 */
    color: var(--text-primary);         /* 文字色 */
    cursor: pointer;                    /* 鼠标指针 */
}

/* 主要操作按钮 */
.primary-btn {
    padding: 8px 20px;                  /* 内边距 */
    background: var(--primary);         /* 主色背景 */
    color: white;                       /* 白色文字 */
    border: none;                       /* 无边框 */
    border-radius: var(--radius-sm);    /* 圆角 */
    font-size: 13px;                    /* 字号 */
    font-weight: 600;                   /* 半粗体 */
    cursor: pointer;                    /* 鼠标指针 */
    transition: background 0.2s;        /* 过渡 */
}

/* 主要按钮悬停 */
.primary-btn:hover {
    background: var(--primary-dark);    /* 深色背景 */
}

/* 取消按钮 */
.cancel-btn {
    padding: 8px 20px;                  /* 内边距 */
    background: var(--bg-input);        /* 背景 */
    color: var(--text-primary);         /* 文字色 */
    border: 1px solid var(--border);    /* 边框 */
    border-radius: var(--radius-sm);    /* 圆角 */
    font-size: 13px;                    /* 字号 */
    cursor: pointer;                    /* 鼠标指针 */
    transition: background 0.2s;        /* 过渡 */
}

/* 取消按钮悬停 */
.cancel-btn:hover {
    background: var(--bg-hover);        /* 悬停背景 */
}

/* ========== 数据表格样式 ========== */

/* 表格容器（横向滚动） */
.table-container {
    overflow-x: auto;                   /* 横向滚动 */
}

/* 数据表格 */
.data-table {
    width: 100%;                        /* 满宽 */
    border-collapse: collapse;          /* 合并边框 */
    font-size: 13px;                    /* 字号 */
}

/* 表头 */
.data-table th {
    background: var(--bg-input);        /* 表头背景 */
    color: var(--text-secondary);       /* 表头文字色 */
    font-weight: 600;                   /* 半粗体 */
    padding: 10px 12px;                 /* 内边距 */
    text-align: left;                   /* 左对齐 */
    border-bottom: 2px solid var(--border); /* 底部边框 */
    white-space: nowrap;                /* 不换行 */
}

/* 表格行 */
.data-table td {
    padding: 10px 12px;                 /* 内边距 */
    border-bottom: 1px solid var(--border); /* 底部边框 */
    vertical-align: middle;             /* 垂直居中 */
}

/* 表格行悬停 */
.data-table tbody tr:hover {
    background: var(--bg-hover);        /* 悬停背景 */
}

/* 角色标签 */
.role-badge {
    display: inline-block;              /* 行内块 */
    padding: 2px 8px;                   /* 内边距 */
    border-radius: 10px;                /* 圆角 */
    font-size: 12px;                    /* 字号 */
    font-weight: 600;                   /* 半粗体 */
}

/* 管理员角色标签 */
.role-admin {
    background: #DBEAFE;                /* 浅蓝背景 */
    color: #1D4ED8;                     /* 蓝色文字 */
}

/* 普通用户角色标签 */
.role-user {
    background: #E5E7EB;               /* 灰色背景 */
    color: #4B5563;                     /* 深灰文字 */
}

/* 权限标签容器 */
.perm-tags {
    display: flex;                      /* 水平排列 */
    flex-wrap: wrap;                    /* 换行 */
    gap: 4px;                           /* 间距 */
}

/* 权限标签 */
.perm-tag {
    display: inline-block;              /* 行内块 */
    padding: 2px 6px;                   /* 内边距 */
    background: var(--bg-input);        /* 背景 */
    border-radius: 4px;                 /* 圆角 */
    font-size: 11px;                    /* 小字号 */
    color: var(--text-secondary);       /* 次要颜色 */
}

/* 状态标签 */
.status-badge {
    display: inline-block;              /* 行内块 */
    padding: 2px 8px;                   /* 内边距 */
    border-radius: 10px;                /* 圆角 */
    font-size: 12px;                    /* 字号 */
    font-weight: 600;                   /* 半粗体 */
}

/* 正常状态 */
.status-active {
    background: #D1FAE5;               /* 浅绿背景 */
    color: #059669;                     /* 绿色文字 */
}

/* 已禁用状态 */
.status-disabled {
    background: #FEE2E2;               /* 浅红背景 */
    color: #DC2626;                     /* 红色文字 */
}

/* 操作按钮容器 */
.action-btns {
    display: flex;                      /* 水平排列 */
    gap: 4px;                           /* 间距 */
    flex-wrap: wrap;                    /* 换行 */
}

/* 小按钮（表格内操作） */
.btn-sm {
    padding: 4px 8px;                   /* 小内边距 */
    border: 1px solid var(--border);    /* 边框 */
    border-radius: 4px;                 /* 小圆角 */
    font-size: 11px;                    /* 小字号 */
    cursor: pointer;                    /* 鼠标指针 */
    background: var(--bg-card);         /* 卡片背景 */
    color: var(--text-primary);         /* 文字色 */
    transition: background 0.2s;        /* 过渡 */
}

/* 编辑按钮 */
.btn-edit {
    color: var(--primary);              /* 主色文字 */
    border-color: var(--primary);       /* 主色边框 */
}

/* 编辑按钮悬停 */
.btn-edit:hover {
    background: var(--primary);         /* 主色背景 */
    color: white;                       /* 白色文字 */
}

/* 警告按钮（重置密码） */
.btn-warn {
    color: #F59E0B;                     /* 橙色文字 */
    border-color: #F59E0B;             /* 橙色边框 */
}

/* 警告按钮悬停 */
.btn-warn:hover {
    background: #F59E0B;               /* 橙色背景 */
    color: white;                       /* 白色文字 */
}

/* 危险按钮（禁用/删除） */
.btn-danger {
    color: #EF4444;                     /* 红色文字 */
    border-color: #EF4444;             /* 红色边框 */
}

/* 危险按钮悬停 */
.btn-danger:hover {
    background: #EF4444;               /* 红色背景 */
    color: white;                       /* 白色文字 */
}

/* 成功按钮（启用） */
.btn-success {
    color: #22C55E;                     /* 绿色文字 */
    border-color: #22C55E;             /* 绿色边框 */
}

/* 成功按钮悬停 */
.btn-success:hover {
    background: #22C55E;               /* 绿色背景 */
    color: white;                       /* 白色文字 */
}

/* 小字文本 */
.text-small {
    font-size: 12px;                    /* 小字号 */
    color: var(--text-secondary);       /* 次要颜色 */
}

/* 操作类型标签 */
.action-badge {
    display: inline-block;              /* 行内块 */
    padding: 2px 8px;                   /* 内边距 */
    background: var(--bg-input);        /* 背景 */
    border-radius: 4px;                 /* 圆角 */
    font-size: 12px;                    /* 字号 */
    color: var(--text-primary);         /* 文字色 */
}

/* ========== 日志页面筛选栏 ========== */

/* 筛选栏 */
.log-filters {
    display: flex;                      /* 水平排列 */
    gap: 10px;                          /* 间距 */
    margin-bottom: 16px;                /* 底部间距 */
    flex-wrap: wrap;                    /* 换行 */
}

/* 筛选输入框 */
.filter-input {
    padding: 6px 12px;                  /* 内边距 */
    border: 1px solid var(--border);    /* 边框 */
    border-radius: var(--radius-sm);    /* 圆角 */
    background: var(--bg-input);        /* 背景 */
    color: var(--text-primary);         /* 文字色 */
    font-size: 13px;                    /* 字号 */
    outline: none;                      /* 无轮廓 */
    min-width: 160px;                   /* 最小宽度 */
}

/* 筛选输入框聚焦 */
.filter-input:focus {
    border-color: var(--primary);       /* 聚焦边框变主色 */
}

/* 日志条数提示 */
.log-count {
    margin-top: 12px;                   /* 顶部间距 */
    font-size: 12px;                    /* 字号 */
    color: var(--text-secondary);       /* 次要颜色 */
    text-align: right;                  /* 右对齐 */
}

/* ========== 弹窗样式 ========== */

/* 弹窗遮罩层 */
.modal {
    position: fixed;                    /* 固定定位 */
    top: 0;                             /* 顶部 */
    left: 0;                            /* 左侧 */
    width: 100%;                        /* 满宽 */
    height: 100%;                       /* 满高 */
    background: rgba(0, 0, 0, 0.5);    /* 半透明黑色遮罩 */
    display: flex;                      /* 弹性布局 */
    align-items: center;                /* 垂直居中 */
    justify-content: center;            /* 水平居中 */
    z-index: 200;                       /* 最高层级 */
}

/* 弹窗内容 */
.modal-content {
    background: var(--bg-card);         /* 卡片背景 */
    border-radius: var(--radius);       /* 圆角 */
    padding: 24px;                      /* 内边距 */
    min-width: 360px;                   /* 最小宽度 */
    max-width: 90%;                     /* 最大宽度 */
    box-shadow: 0 8px 32px rgba(0,0,0,0.2); /* 大阴影 */
}

/* 弹窗标题 */
.modal-title {
    font-size: 16px;                    /* 字号 */
    margin-bottom: 16px;                /* 底部间距 */
    color: var(--text-primary);         /* 主文字色 */
}

/* 弹窗按钮组 */
.modal-actions {
    display: flex;                      /* 水平排列 */
    gap: 10px;                          /* 间距 */
    margin-top: 20px;                   /* 顶部间距 */
    justify-content: flex-end;          /* 右对齐 */
}

/* ========== iframe嵌入页面样式 ========== */

/* 嵌入页面body */
.embed-page {
    height: 100vh;                      /* 占满视口 */
    overflow: hidden;                   /* 禁止滚动 */
}

/* iframe容器 */
.embed-container {
    flex: 1;                            /* 占据剩余空间 */
    height: calc(100vh - 53px);         /* 减去顶栏高度 */
}

/* iframe本体 */
.embed-iframe {
    width: 100%;                        /* 满宽 */
    height: 100%;                       /* 满高 */
    border: none;                       /* 无边框 */
}

/* ========================================================================== */
/* lv3 登录页样式（2026-05-22 改首页 ui02） - 用 8 张分模块素材拼装 + 响应式 */
/* ========================================================================== */

/* lv3 命名空间，body 整体底色与文字色 */
.lv3-body {
    margin: 0;                                              /* 去掉默认外边距 */
    padding: 0;                                             /* 去掉默认内边距 */
    background: #FDFBFA;                                    /* 主底色：暖米白 */
    color: #1F2937;                                         /* 主文字色：深灰 */
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;  /* 中英文字体栈 */
    min-height: 100vh;                                      /* 最少占满视口 */
    display: flex;                                          /* 垂直 flex：导航 / 主体 / 页脚 */
    flex-direction: column;                                 /* 纵向排列 */
    -webkit-font-smoothing: antialiased;                    /* 字体抗锯齿 */
    overflow-x: hidden;                                     /* 防止横向滚动 */
}

/* 顶部导航：整宽显图 */
.lv3-navbar {
    width: 100%;                                            /* 整宽 */
    background: #FDFBFA;                                    /* 与底色一致 */
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);                /* 极轻底边阴影，分隔感 */
    z-index: 10;                                            /* 在主体之上 */
}
.lv3-navbar-img {
    display: block;                                         /* 块元素 */
    width: 100%;                                            /* 整宽 */
    height: auto;                                           /* 等比缩放 */
    max-height: 70px;                                       /* 桌面端 navbar 高度上限 */
    object-fit: contain;                                    /* 等比包含 */
    object-position: center;                                /* 居中 */
}

/* Hero 主体：左右两栏布局，底部叠风景图 */
.lv3-hero {
    position: relative;                                     /* 让 .lv3-landscape 绝对定位时相对它 */
    flex: 1 1 auto;                                         /* 撑满剩余空间 */
    width: 100%;                                            /* 整宽 */
    overflow: hidden;                                       /* 裁掉超出风景图 */
    padding: 48px 64px 0;                                   /* 上 48 / 左右 64 / 下 0 */
    box-sizing: border-box;                                 /* 内边距算在宽度里 */
    min-height: 720px;                                      /* 桌面最小高度，给登录卡留位置 */
}

/* 风景装饰条：53px 高的纯净远山+果园底图，永远贴在视口底 */
.lv3-landscape {
    position: fixed;                                        /* 固定在视口 */
    left: 0;                                                /* 左到边 */
    right: 0;                                               /* 右到边 */
    bottom: 0;                                              /* 贴视口底 */
    width: 100%;                                            /* 整宽 */
    height: auto;                                           /* 等比缩放 */
    z-index: 0;                                             /* 最底层 */
    pointer-events: none;                                   /* 点击穿透 */
    user-select: none;                                      /* 防选中 */
    opacity: 0.95;                                          /* 微微透明，融入底色 */
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);  /* 顶部渐变淡出 */
            mask-image: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);  /* 同上 */
}

/* 内容栅格：左品牌 / 右登录卡 */
.lv3-grid {
    position: relative;                                     /* 在风景图之上 */
    z-index: 1;                                             /* 层级在 landscape 上 */
    display: grid;                                          /* 网格布局 */
    grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);  /* 左宽 右窄 */
    gap: 48px;                                              /* 两栏间距 */
    max-width: 1440px;                                      /* 最大内容宽度 */
    margin: 0 auto;                                         /* 居中 */
    align-items: center;                                    /* 垂直居中 */
}

/* 左栏：品牌视觉 */
.lv3-left {
    display: flex;                                          /* 纵向 flex */
    flex-direction: column;                                 /* 纵向 */
    align-items: flex-start;                                /* 左对齐 */
    gap: 24px;                                              /* 元素间距 */
    padding: 32px 0;                                        /* 上下内边距 */
}
.lv3-calligraphy {
    display: block;                                         /* 块元素 */
    width: 100%;                                            /* 跟随左栏宽 */
    max-width: 720px;                                       /* 上限 */
    height: auto;                                           /* 等比 */
}
.lv3-slogan-main {
    display: block;
    width: 100%;
    max-width: 560px;                                       /* 主标语稍窄 */
    height: auto;
}
.lv3-slogan-sub {
    display: block;
    width: 100%;
    max-width: 560px;                                       /* 副标语同主标语 */
    height: auto;
}
.lv3-features {
    display: block;
    width: 100%;
    max-width: 640px;                                       /* 三特性稍宽 */
    height: auto;
    margin-top: 8px;                                        /* 与上方拉开一点 */
}

/* 右栏：登录卡 */
.lv3-right {
    display: flex;                                          /* flex */
    justify-content: center;                                /* 居中 */
    align-items: center;                                    /* 垂直居中 */
    padding: 16px 0;                                        /* 上下气口 */
}

/* 登录卡：相对定位，aspect-ratio 锁死与卡片图相同的比例 */
.lv3-card {
    position: relative;                                     /* 让内部元素绝对定位 */
    width: 100%;                                            /* 跟随右栏 */
    max-width: 440px;                                       /* 卡片最大宽度 */
    aspect-ratio: 600 / 780;                                /* 锁定与 09_login_card 同比 */
}

/* 卡片背景图：充满 .lv3-card */
.lv3-card-bg {
    position: absolute;                                     /* 绝对定位 */
    inset: 0;                                               /* 充满父容器 */
    width: 100%;                                            /* 整宽 */
    height: 100%;                                           /* 整高 */
    object-fit: contain;                                    /* 等比包含 */
    pointer-events: none;                                   /* 点击穿透 */
    user-select: none;                                      /* 防选中 */
}

/* 表单：充满 .lv3-card，所有交互元素绝对定位 */
.lv3-form {
    position: absolute;                                     /* 绝对定位 */
    inset: 0;                                               /* 充满 */
    margin: 0;                                              /* 去默认 margin */
    padding: 0;                                             /* 去默认 padding */
}

/* 错误提示：叠在卡片顶部 */
.lv3-error {
    position: absolute;                                     /* 绝对定位 */
    top: 7%;                                                /* 在 "欢迎登录" 下方 */
    left: 10%;                                              /* 与输入框同左缘 */
    right: 10%;                                             /* 与输入框同右缘 */
    background: #FEF2F2;                                    /* 浅红 */
    color: #DC2626;                                         /* 深红字 */
    padding: 8px 12px;                                      /* 内边距 */
    border-radius: 6px;                                     /* 圆角 */
    font-size: 13px;                                        /* 字号 */
    text-align: center;                                     /* 居中 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);              /* 轻阴影 */
    z-index: 5;                                             /* 在背景上 */
}

/* 输入框通用样式：白底盖住卡片图上的占位字，绝对定位对齐图 */
.lv3-input {
    position: absolute;                                     /* 绝对定位 */
    left: 10%;                                              /* 左缘 = 60/600 */
    width: 80%;                                             /* 宽度 = 480/600 */
    height: 7.44%;                                          /* 高度 = 58/780 */
    box-sizing: border-box;                                 /* 边框算在内 */
    background: #FFFFFF;                                    /* 白底覆盖图上占位字 */
    border: none;                                           /* 无边框（图上已有） */
    outline: none;                                          /* 无聚焦轮廓 */
    padding: 0 16px 0 52px;                                 /* 左留图标位置 */
    font-size: 15px;                                        /* 字号 */
    color: #1F2937;                                         /* 深灰文字 */
    line-height: 1.2;                                       /* 行高 */
    border-radius: 8px;                                     /* 卡片图上的圆角 */
    display: flex;                                          /* 让 contenteditable 文字垂直居中 */
    align-items: center;                                    /* 垂直居中 */
}

/* 账号输入框：位置精确对齐 09_login_card */
.lv3-input-username {
    top: 31.92%;                                            /* y=249/780 */
}

/* 密码输入框：位置精确对齐 */
.lv3-input-password {
    top: 45.51%;                                            /* y=355/780 */
}

/* contenteditable 占位文字（图上已绘"请输入账号"，但被白底覆盖了，重新提供） */
.lv3-input-username:empty::before {
    content: "请输入账号";                                  /* 占位文字 */
    color: #9CA3AF;                                         /* 灰 */
    pointer-events: none;                                   /* 点击穿透到下方编辑层 */
}
.lv3-input-username:focus::before {
    content: "";                                            /* 聚焦后隐藏占位 */
}

/* 密码框的占位（原生 input 用 placeholder 属性） */
.lv3-input-password::placeholder {
    color: #9CA3AF;                                         /* 灰 */
}

/* 记住账号：自定义橙色 checkbox，覆盖图上的灰框 */
.lv3-remember {
    position: absolute;                                     /* 绝对定位 */
    left: 10%;                                              /* 左缘对齐 */
    top: 53%;                                               /* y≈418/780 = 53.6% 取整 */
    width: 110px;                                           /* 可点击区域 */
    height: 24px;                                           /* 高度 */
    display: flex;                                          /* flex 让 checkbox 居中 */
    align-items: center;                                    /* 垂直居中 */
    cursor: pointer;                                        /* 手型指针 */
}
.lv3-remember input[type="checkbox"] {
    position: absolute;                                     /* 隐藏原生 checkbox */
    opacity: 0;                                             /* 透明 */
    width: 16px;                                            /* 与图上方框等大 */
    height: 16px;                                           /* 同上 */
    margin: 0;                                              /* 去默认 margin */
    cursor: pointer;                                        /* 手型 */
}
.lv3-remember-box {
    display: inline-block;                                  /* 行内块 */
    width: 16px;                                            /* 与图上方框等大 */
    height: 16px;                                           /* 同上 */
    background: #FFFFFF;                                    /* 白底盖住图上方框 */
    border: 1.5px solid #D1D5DB;                            /* 灰边 */
    border-radius: 4px;                                     /* 圆角 */
    transition: background 0.15s, border-color 0.15s;       /* 切换动画 */
}
.lv3-remember input:checked + .lv3-remember-box {
    background: #E97110;                                    /* 主橙色 */
    border-color: #E97110;                                  /* 边变橙 */
}
.lv3-remember input:checked + .lv3-remember-box::after {
    content: "";                                            /* 勾标 */
    position: absolute;                                     /* 绝对 */
    left: 5px;                                              /* 微调勾位置 */
    top: 2px;                                               /* 微调勾位置 */
    width: 4px;                                             /* 勾宽 */
    height: 9px;                                            /* 勾高 */
    border: solid #FFFFFF;                                  /* 白色勾 */
    border-width: 0 2px 2px 0;                              /* 只显右下边 */
    transform: rotate(45deg);                               /* 旋转成勾 */
}

/* 忘记密码：透明热区，覆盖图上的橙色文字 */
.lv3-forgot {
    position: absolute;                                     /* 绝对 */
    right: 10%;                                             /* 右缘对齐 */
    top: 53.3%;                                             /* y≈420/780，与"记住账号"同一行 */
    width: 80px;                                            /* 文字宽 */
    height: 22px;                                           /* 文字高 */
    display: block;                                         /* 块 */
    background: transparent;                                /* 透明 */
    cursor: pointer;                                        /* 手型 */
    text-decoration: none;                                  /* 去下划线 */
}

/* 进入系统：透明覆盖图上的橙色按钮 */
.lv3-btn-submit {
    position: absolute;                                     /* 绝对 */
    left: 10%;                                              /* 左缘 */
    top: 62.31%;                                            /* y=486/780 */
    width: 80%;                                             /* 宽 */
    height: 7.95%;                                          /* y=486~548 */
    background: transparent;                                /* 透明，露出图上按钮 */
    border: none;                                           /* 无边 */
    cursor: pointer;                                        /* 手型 */
    border-radius: 8px;                                     /* 圆角，让 hover 视觉对齐图 */
    transition: filter 0.15s;                               /* hover 动画 */
}
.lv3-btn-submit:hover {
    filter: brightness(1.08);                               /* hover 微亮 */
}
.lv3-btn-submit:active {
    filter: brightness(0.95);                               /* 按下微暗 */
}

/* 验证码登录：透明覆盖图上的边框按钮 */
.lv3-btn-sms {
    position: absolute;                                     /* 绝对 */
    left: 10%;                                              /* 左缘 */
    top: 78.85%;                                            /* y=615/780 */
    width: 80%;                                             /* 宽 */
    height: 8.07%;                                          /* y=615~678 */
    background: transparent;                                /* 透明 */
    border: none;                                           /* 无边 */
    cursor: pointer;                                        /* 手型 */
    border-radius: 8px;                                     /* 圆角 */
    transition: background 0.15s;                           /* hover 动画 */
}
.lv3-btn-sms:hover {
    background: rgba(233, 113, 16, 0.06);                   /* hover 微橙底 */
}

/* 页脚 */
.lv3-footer {
    width: 100%;                                            /* 整宽 */
    background: transparent;                                /* 透明，让风景图延伸 */
    padding: 16px 16px 24px;                                /* 内边距 */
    display: flex;                                          /* flex 居中 */
    justify-content: center;                                /* 水平居中 */
    align-items: center;                                    /* 垂直居中 */
    z-index: 2;                                             /* 在风景图之上 */
    position: relative;                                     /* 让 z-index 生效 */
}
.lv3-footer-img {
    display: block;                                         /* 块 */
    width: 100%;                                            /* 整宽 */
    max-width: 720px;                                       /* 上限 */
    height: auto;                                           /* 等比 */
}

/* ========================================================================== */
/* 响应式 - 平板 (max-width: 1023px)：单栏垂直，先品牌再登录卡                  */
/* ========================================================================== */
@media (max-width: 1023px) {
    .lv3-hero {
        padding: 32px 32px 0;                               /* 缩小左右内边距 */
        min-height: auto;                                   /* 不强制最小高度 */
    }
    .lv3-grid {
        grid-template-columns: 1fr;                         /* 单栏 */
        gap: 32px;                                          /* 缩小间距 */
        max-width: 720px;                                   /* 缩小最大宽 */
    }
    .lv3-left {
        align-items: center;                                /* 居中 */
        text-align: center;                                 /* 文字居中 */
        padding: 16px 0;                                    /* 缩小 padding */
    }
    .lv3-calligraphy {
        max-width: 560px;                                   /* 缩小书法字 */
    }
    .lv3-slogan-main,
    .lv3-slogan-sub {
        max-width: 480px;                                   /* 缩小标语 */
    }
    .lv3-features {
        max-width: 560px;                                   /* 缩小特性 */
    }
    .lv3-card {
        max-width: 400px;                                   /* 卡片稍小 */
    }
}

/* ========================================================================== */
/* 响应式 - 移动 (max-width: 639px)：进一步压缩                                  */
/* ========================================================================== */
@media (max-width: 639px) {
    .lv3-navbar-img {
        max-height: 50px;                                   /* navbar 更矮 */
    }
    .lv3-hero {
        padding: 20px 16px 0;                               /* 移动端左右收紧 */
    }
    .lv3-grid {
        gap: 24px;                                          /* 紧凑间距 */
    }
    .lv3-left {
        gap: 14px;                                          /* 内元素更近 */
    }
    .lv3-calligraphy {
        max-width: 320px;                                   /* 书法字适配窄屏 */
    }
    .lv3-slogan-main,
    .lv3-slogan-sub {
        max-width: 320px;                                   /* 标语适配 */
    }
    .lv3-features {
        max-width: 360px;                                   /* 特性适配 */
    }
    .lv3-card {
        max-width: 340px;                                   /* 登录卡更小 */
    }
    .lv3-input {
        font-size: 14px;                                    /* 字号稍小 */
        padding: 0 12px 0 44px;                             /* 内边距收紧 */
    }
    .lv3-footer {
        padding: 12px 16px 20px;                            /* 页脚紧凑 */
    }
    .lv3-footer-img {
        max-width: 520px;                                   /* 页脚字图缩小 */
    }
}

/* ========================================================================== */
/* 响应式 - 超窄移动 (max-width: 380px)：极限场景                                */
/* ========================================================================== */
@media (max-width: 380px) {
    .lv3-card {
        max-width: 300px;                                   /* 卡片再小 */
    }
    .lv3-input {
        font-size: 13px;                                    /* 字号更小 */
        padding: 0 10px 0 40px;                             /* 进一步收紧 */
    }
}

/* lv3 命名空间结束 ========================================================== */

/* ========================================================================== */
/* lv4 登录页样式（2026-05-24 改首页 ui03）= 单图覆盖法，整页 = 参考图 02 整张 */
/* 思路：把整张参考图作为 stage 背景，所有交互元素按整图 % 绝对定位透明叠加     */
/* ========================================================================== */

/* lv4 命名空间：body 整体，去默认边距，整页能滚动 */
.lv4-body {
    margin: 0;                                                  /* 去掉浏览器默认 margin */
    padding: 0;                                                 /* 去掉默认 padding */
    background: #FDFBFA;                                        /* 兜底底色：暖米白，万一图加载失败也不丑 */
    color: #1F2937;                                             /* 默认文字深灰 */
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;  /* 中英文字体栈 */
    -webkit-font-smoothing: antialiased;                        /* 字体抗锯齿 */
    min-height: 100vh;                                          /* 至少占满视口 */
    display: flex;                                              /* flex 让 stage 居中 */
    align-items: center;                                        /* 垂直居中 */
    justify-content: center;                                    /* 水平居中 */
    overflow-x: hidden;                                         /* 防止 stage 引起横向滚动 */
}

/* 舞台容器：aspect-ratio 锁定拼合后整图 1672:951（navbar 100 + 主图 851） */
.lv4-stage {
    position: relative;                                         /* 让内部元素绝对定位时相对它 */
    width: 100%;                                                /* 默认占满父容器 */
    max-width: 1672px;                                          /* 上限 = 原图宽度，不放大 */
    aspect-ratio: 1672 / 951;                                   /* 锁死拼合图比例 */
    overflow: hidden;                                           /* 圆角等场景兜底 */
    background: #FDFBFA;                                        /* 兜底色 */
}

/* 背景图：整张参考图，object-fit cover 保证比例正确 */
.lv4-bg {
    position: absolute;                                         /* 绝对填满 stage */
    inset: 0;                                                   /* top/right/bottom/left = 0 */
    width: 100%;                                                /* 整宽 */
    height: 100%;                                               /* 整高 */
    object-fit: cover;                                          /* 等比裁切以充满 */
    object-position: center;                                    /* 居中 */
    user-select: none;                                          /* 防止用户选中图片 */
    pointer-events: none;                                       /* 点击穿透到下方交互层 */
    z-index: 0;                                                 /* 最底层 */
}

/* 交互层：覆盖整个 stage，作为绝对定位元素的参考系 */
.lv4-overlay {
    position: absolute;                                         /* 绝对 */
    inset: 0;                                                   /* 充满 stage */
    z-index: 1;                                                 /* 在背景图之上 */
}

/* ============================ 顶部导航三个热区 ============================ */
/* 通用：透明矩形，hover 时叠一层极淡橙色背景，告诉用户可点击 */
.lv4-nav {
    position: absolute;                                         /* 绝对定位 */
    background: transparent;                                    /* 透明背景，让图露出 */
    border: none;                                               /* 去 button 默认边 */
    cursor: pointer;                                            /* 手型指针 */
    padding: 0;                                                 /* 去 button 默认 padding */
    border-radius: 6px;                                         /* 微圆角，hover 视觉对齐 */
    transition: background 0.15s;                               /* hover 渐变 */
}
.lv4-nav:hover {
    background: rgba(244, 161, 31, 0.10);                       /* hover 极浅橙 */
}
.lv4-nav:focus-visible {
    outline: 2px solid rgba(244, 161, 31, 0.50);                /* 键盘聚焦轮廓 */
    outline-offset: 2px;                                        /* 轮廓外移 */
}
/* "安全保障" 链接：navbar 在拼合图 y=0~100 内，链接 y=30~70 → 3.15%~7.36% */
.lv4-nav-security {
    left: 66.4%;                                                /* x=1110/1672 */
    top: 2.6%;                                                  /* y=25/951 */
    width: 7.5%;                                                /* 约 125 px */
    height: 5.3%;                                               /* y=25~75 / 951 */
}
/* "帮助中心" 链接 */
.lv4-nav-help {
    left: 75.7%;                                                /* x=1265/1672 */
    top: 2.6%;                                                  /* 同上 */
    width: 7.7%;                                                /* 约 130 px */
    height: 5.3%;                                               /* 同上 */
}
/* "简体中文" 切换 */
.lv4-nav-lang {
    left: 85.5%;                                                /* x=1430/1672 */
    top: 2.6%;                                                  /* 同上 */
    width: 10.5%;                                               /* 含⌄下拉箭头 */
    height: 5.3%;                                               /* 同上 */
}

/* ============================ 登录表单：透明叠加层 ============================ */
/* 表单本体：充满整个 stage，里面的子元素都按整图 % 定位 */
.lv4-form {
    position: absolute;                                         /* 绝对定位 */
    inset: 0;                                                   /* 充满 */
    margin: 0;                                                  /* 去默认 */
    padding: 0;                                                 /* 去默认 */
}

/* 错误提示：登录失败时显示在卡片顶部，叠在"欢迎登录"标题下面 */
.lv4-error {
    position: absolute;                                         /* 绝对 */
    left: 65.0%;                                                /* 卡左缘略内 */
    right: 9.0%;                                                /* 卡右缘略内 */
    top: 35.5%;                                                 /* 副标下方一点（基于 951 高） */
    background: rgba(254, 242, 242, 0.96);                      /* 浅红半透 */
    color: #DC2626;                                             /* 深红字 */
    border: 1px solid rgba(220, 38, 38, 0.20);                  /* 细红边 */
    padding: 8px 12px;                                          /* 内边距 */
    border-radius: 6px;                                         /* 圆角 */
    font-size: 13px;                                            /* 字号 */
    text-align: center;                                         /* 居中 */
    z-index: 5;                                                 /* 在表单元素之上 */
}

/* 输入框通用样式：白底盖住图上原本的"请输入账号""请输入密码"占位字，
   保留原图风格的同时让 input 真正可用 */
.lv4-field {
    position: absolute;                                         /* 绝对定位 */
    left: 64.9%;                                                /* 输入框左缘对应 1085/1672 */
    width: 26.2%;                                               /* 输入框宽度对应 (1522-1085)/1672 */
    /* height 由各 input 自身指定，避免一刀切覆盖到标签或下方间距 */
    box-sizing: border-box;                                     /* border/padding 算在尺寸内 */
    background: #FFFFFF;                                        /* 白底盖住图上占位字 */
    border: 1px solid transparent;                              /* 默认透明边（图上已有边） */
    outline: none;                                              /* 去聚焦轮廓 */
    padding: 0 16px 0 44px;                                     /* 左侧留空给图上的人形/锁形图标 */
    font-size: 15px;                                            /* 字号 */
    color: #1F2937;                                             /* 文字深灰 */
    line-height: 1.2;                                           /* 行高 */
    border-radius: 6px;                                         /* 圆角与图上一致 */
    display: flex;                                              /* flex 让 contenteditable 内容垂直居中 */
    align-items: center;                                        /* 垂直居中 */
    transition: border-color 0.15s, box-shadow 0.15s;           /* focus 渐变 */
}
.lv4-field:focus {
    border-color: rgba(244, 161, 31, 0.50);                     /* 聚焦：橙色边框 */
    box-shadow: 0 0 0 3px rgba(244, 161, 31, 0.10);             /* 聚焦：橙色光晕 */
}

/* 账号输入框：实测拼合图 y=361~428 → 38.0%~45.0% (用 chrome grid 比对得） */
.lv4-username {
    top: 38.0%;                                                 /* 输入框顶部 y≈361/951 */
    height: 7.0%;                                               /* 高度 ~67 px */
}
/* 占位文字（contenteditable 无 placeholder，自己用伪元素） */
.lv4-username:empty::before {
    content: "请输入账号";                                       /* 占位文字 */
    color: #9CA3AF;                                             /* 灰色占位 */
    pointer-events: none;                                       /* 点击穿透到 contenteditable */
}
.lv4-username:focus::before {
    content: "";                                                /* 聚焦后清空占位 */
}

/* 密码输入框：实测拼合图 y=466~533 → 49.0%~56.0% (用 chrome grid 比对得) */
.lv4-password {
    top: 49.0%;                                                 /* 输入框顶部 y≈466/951 */
    height: 7.0%;                                               /* 高度 ~67 px */
    padding: 0 44px 0 44px;                                     /* 右侧也留空，给眼睛图标 */
}
.lv4-password::placeholder {
    color: #9CA3AF;                                             /* 灰色占位 */
}

/* ============================ 记住账号 / 忘记密码 ============================ */
/* 记住账号 label：包住自定义 checkbox，盖住图上的 ☐
   实测拼合图☐位置 y≈542~562 → 57.0%~59.0% */
.lv4-remember {
    position: absolute;                                         /* 绝对 */
    left: 65.1%;                                                /* x≈1090/1672 */
    top: 57.0%;                                                 /* y≈542/951 */
    width: 1.2%;                                                /* 仅覆盖图上☐方块 ~20 px */
    height: 2.0%;                                               /* ~19 px */
    display: flex;                                              /* flex 让 box 居中 */
    align-items: center;                                        /* 垂直居中 */
    cursor: pointer;                                            /* 手型 */
}
/* 原生 checkbox 隐藏：用伪元素呈现 */
.lv4-remember input[type="checkbox"] {
    position: absolute;                                         /* 隐藏 */
    opacity: 0;                                                 /* 不可见 */
    width: 100%;                                                /* 占满 label */
    height: 100%;                                               /* 占满 label */
    margin: 0;                                                  /* 去 margin */
    cursor: pointer;                                            /* 手型 */
}
/* 自定义对勾框：盖住图上灰色☐ */
.lv4-remember-box {
    display: inline-block;                                      /* 行内块 */
    width: 100%;                                                /* 跟 label 一样大 */
    height: 100%;                                               /* 同上 */
    background: #FFFFFF;                                        /* 白底盖图 */
    border: 1.5px solid #D1D5DB;                                /* 灰边 */
    border-radius: 3px;                                         /* 微圆角 */
    box-sizing: border-box;                                     /* 边算尺寸内 */
    position: relative;                                         /* 让对勾绝对定位 */
    transition: background 0.15s, border-color 0.15s;           /* 切换动画 */
}
/* 勾选时：橙底白勾 */
.lv4-remember input:checked + .lv4-remember-box {
    background: #F47A1F;                                        /* 品牌橙 */
    border-color: #F47A1F;                                      /* 边变橙 */
}
.lv4-remember input:checked + .lv4-remember-box::after {
    content: "";                                                /* 勾标 */
    position: absolute;                                         /* 绝对 */
    left: 32%;                                                  /* 勾起点 x */
    top: 8%;                                                    /* 勾起点 y */
    width: 25%;                                                 /* 勾宽 */
    height: 60%;                                                /* 勾高 */
    border: solid #FFFFFF;                                      /* 白色勾 */
    border-width: 0 2px 2px 0;                                  /* 只显右下边 */
    transform: rotate(45deg);                                   /* 旋转成对勾 */
}

/* 忘记密码热区：透明 a 标签，覆盖图上橙色"忘记密码?"文字
   实测拼合图该橙字 y≈542~570 → 57.0%~60.0% */
.lv4-forgot {
    position: absolute;                                         /* 绝对 */
    right: 9.0%;                                                /* 卡右缘略内 */
    top: 57.0%;                                                 /* y≈542/951 */
    width: 6.5%;                                                /* ~110 px */
    height: 3.0%;                                               /* ~29 px */
    background: transparent;                                    /* 透明 */
    cursor: pointer;                                            /* 手型 */
    text-decoration: none;                                      /* 去下划线 */
    border-radius: 4px;                                         /* 微圆角 */
    transition: background 0.15s;                               /* hover 动画 */
}
.lv4-forgot:hover {
    background: rgba(244, 161, 31, 0.10);                       /* hover 极浅橙 */
}

/* ============================ 主按钮 ============================ */
/* 进入系统按钮：拼合图 y=602~675 → 63.30%~70.98% (基于 H_new=951) */
.lv4-btn-submit {
    position: absolute;                                         /* 绝对 */
    left: 64.9%;                                                /* 与输入框同左缘 */
    top: 63.3%;                                                 /* y≈602/951，按钮顶部 */
    width: 26.2%;                                               /* 同输入框宽 */
    height: 7.7%;                                               /* ~73 px */
    background: transparent;                                    /* 透明，露出图上橙色按钮 */
    border: none;                                               /* 无边（图上已有） */
    cursor: pointer;                                            /* 手型 */
    border-radius: 8px;                                         /* 圆角对齐图 */
    transition: filter 0.15s, transform 0.05s;                  /* hover/active 动画 */
}
.lv4-btn-submit:hover {
    filter: brightness(1.08);                                   /* hover 微亮，图上按钮看着可点 */
}
.lv4-btn-submit:active {
    filter: brightness(0.95);                                   /* 按下微暗 */
    transform: translateY(1px);                                 /* 按下下沉 1 px */
}
.lv4-btn-submit:focus-visible {
    outline: 2px solid rgba(244, 161, 31, 0.60);                /* 键盘焦点轮廓 */
    outline-offset: 2px;                                        /* 轮廓外移 */
}

/* 使用验证码登录按钮：拼合图 y=750~820 → 78.86%~86.22% (基于 H_new=951) */
.lv4-btn-sms {
    position: absolute;                                         /* 绝对 */
    left: 64.9%;                                                /* 与输入框同左缘 */
    top: 78.9%;                                                 /* y≈750/951 */
    width: 26.2%;                                               /* 同输入框宽 */
    height: 7.4%;                                               /* ~70 px */
    background: transparent;                                    /* 透明 */
    border: none;                                               /* 无边（图上已有边框） */
    cursor: pointer;                                            /* 手型 */
    border-radius: 8px;                                         /* 圆角 */
    transition: background 0.15s, filter 0.15s;                 /* 动画 */
}
.lv4-btn-sms:hover {
    background: rgba(244, 161, 31, 0.08);                       /* hover 极浅橙 */
}
.lv4-btn-sms:focus-visible {
    outline: 2px solid rgba(244, 161, 31, 0.60);                /* 键盘焦点 */
    outline-offset: 2px;                                        /* 轮廓外移 */
}

/* ============================ 响应式：保持 aspect-ratio 不变 ============================ */
/* 大屏（>= 1672px）：stage 锁定 max-width，整图原大显示，居中 */
@media (min-width: 1672px) {
    .lv4-stage {
        max-width: 1672px;                                      /* 不超过原图宽，避免拉糊 */
    }
}

/* 平板（<= 1023px）：整图等比缩到 96% 视口宽，所有 % 定位元素跟着缩 */
@media (max-width: 1023px) {
    .lv4-stage {
        max-width: 96vw;                                        /* 留两侧 2vw 气口 */
    }
    .lv4-field {
        font-size: 14px;                                        /* 文字小一点 */
        padding: 0 12px 0 36px;                                 /* 内边距收紧 */
    }
}

/* 移动（<= 639px）：图缩到很小，输入框可能不好点击。
   此处保留整体 aspect-ratio，但放大输入区到 90% 宽，让用户能点中。
   注意：lv4 单图法在 mobile 体验确实有损，下一步如有需要可加 fallback "只显登录卡" */
@media (max-width: 639px) {
    .lv4-stage {
        max-width: 100vw;                                       /* 全宽 */
    }
    .lv4-field {
        font-size: 13px;                                        /* 字号 */
        padding: 0 8px 0 28px;                                  /* 内边距 */
    }
}

/* 超窄屏（<= 380px）：极限场景，可用性优先 */
@media (max-width: 380px) {
    .lv4-field {
        font-size: 12px;                                        /* 字号更小 */
        padding: 0 6px 0 24px;                                  /* 内边距更紧 */
    }
}

/* lv4 命名空间结束 ========================================================== */


/* ==========================================================================
   lv5 命名空间 (2026-05-24 改首页 ui04)
   核心：背景图 bg_v3（底部小字已 PIL 像素级擦除）+ 真 HTML 登录卡完全覆盖右侧烤死旧卡
   与 lv1/lv2/lv3/lv4 完全隔离，可一键回滚
   ========================================================================== */

/* body 重置：暖米色兜底 + flex 居中 stage (lv6 修正：兜底色与 bg_v4 风景融合，不再扎眼) */
.lv5-body {
    margin: 0;                                                  /* 去掉默认 margin */
    padding: 0;                                                 /* 去掉默认 padding */
    min-height: 100vh;                                          /* 至少全视口高，避免短屏出现底部白色 */
    display: flex;                                              /* flex 居中 */
    align-items: center;                                        /* 垂直居中 */
    justify-content: center;                                    /* 水平居中 */
    /* 兜底渐变：上方淡米黄（呼应天空），下方暖橘灰（呼应橘树前景），让两侧空白与风景融为一体 */
    background: linear-gradient(180deg, #fef6e8 0%, #f5e6cf 60%, #e9d5b5 100%);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: #1f2937;                                             /* 默认文字色 */
    -webkit-font-smoothing: antialiased;                        /* 字体抗锯齿 */
    -moz-osx-font-smoothing: grayscale;                         /* Firefox 抗锯齿 */
}

/* 舞台容器：锁定 1672:951 比例，自适应 viewport 永不被裁切 (lv6 修复)
   核心公式：width = min(100vw, 100vh * 1672/951)
   - 横屏 viewport (例 1440×723)：100vh*1.758=1271 < 1440，取 1271，则 height=723，完整可见
   - 标准 viewport (1672×951)：100vh*1.758=1672 = 1672，取 1672，height=951
   - 高瘦 viewport (1024×768)：100vh*1.758=1350 > 1024，取 1024，height=582
   ↑ 永远不溢出 viewport，配合 body flex center 自动留白居中
   container-type 让内部按 stage 宽度做容器查询，卡内字号 padding 跟 stage 缩放 */
.lv5-stage {
    position: relative;                                         /* 内部 absolute 元素的参照 */
    width: min(100vw, calc(100vh * 1672 / 951));                /* 取 viewport 宽与"按比例换算的宽"较小者 */
    max-width: 1672px;                                          /* 最大宽 = 原图宽，不放大失真 */
    aspect-ratio: 1672 / 951;                                   /* 锁定比例与 bg_v4 一致 */
    overflow: hidden;                                           /* 隐藏溢出 */
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);                   /* 整页外阴影，让 stage 浮起来 */
    container-type: inline-size;                                /* 启用容器查询，让内部用 cqw/cqi 单位跟随 stage 缩放 */
    container-name: lv5stage;                                   /* 容器名，便于子元素引用 */
}

/* 背景图：占满 stage，object-fit cover 覆盖 */
.lv5-bg {
    position: absolute;                                         /* 绝对定位 */
    inset: 0;                                                   /* 上下左右贴边 */
    width: 100%;                                                /* 宽 100% */
    height: 100%;                                               /* 高 100% */
    object-fit: cover;                                          /* 等比覆盖，比例一致所以不裁切 */
    user-select: none;                                          /* 禁止选中 */
    pointer-events: none;                                       /* 不响应鼠标事件 */
    display: block;                                             /* 去掉 inline 间隙 */
}

/* 交互层：覆盖整个 stage */
.lv5-overlay {
    position: absolute;                                         /* 绝对定位 */
    inset: 0;                                                   /* 上下左右贴边 */
    z-index: 2;                                                 /* 在背景图之上 */
}

/* ===== 顶部导航三个透明热区（与 lv4 一致，因为 navbar 烤死的视觉是 OK 的）===== */
.lv5-nav {
    position: absolute;                                         /* 绝对定位在 navbar 区域 */
    top: 2.6%;                                                  /* 顶部偏移，与 navbar 文字基线对齐 */
    height: 5.3%;                                               /* 高约 50px */
    background: transparent;                                    /* 完全透明 */
    border: 0;                                                  /* 去掉 button 默认边框 */
    cursor: pointer;                                            /* 鼠标手指 */
    padding: 0;                                                 /* 去掉 button 默认 padding */
    border-radius: 8px;                                         /* 微圆角（hover 视觉用） */
    transition: background 0.15s;                               /* hover 平滑过渡 */
}
.lv5-nav:hover {
    background: rgba(255,255,255,0.1);                          /* hover 时淡白底，给点击反馈 */
}
.lv5-nav-security { left: 66.4%; width: 7.5%; }                 /* 安全保障热区 */
.lv5-nav-help     { left: 75.7%; width: 7.7%; }                 /* 帮助中心热区 */
.lv5-nav-lang     { left: 85.5%; width: 10.5%; }                /* 简体中文热区 */

/* ===== 真 HTML 登录卡 (lv6 修正) =====
   bg_v4 已 PIL 羽化擦掉烤死卡 (擦除区 x=1000~1612, y=65~945 + 18px 高斯模糊羽化)
   所以真卡只要落在擦除区中心、且尺寸不出擦除区即可——周围露出的都是干净的白色羽化
   擦除区中心 = (1306, 505) in 1672×951 = (78%, 53%)
   擦除区可视范围（白度 > 240）大致 = x=1003~1610 (60%~96%), y=68~942 (7.1%~99%)
   真卡 = top 14%, bottom 4%, left 61.5%, width 33.5% → 卡身 x=1028~1588 / y=133~913
   完全落在擦除区内，且边缘距擦除区边至少 25px，足够包容尺寸缩放误差 */
.lv5-card {
    position: absolute;                                         /* 绝对定位在 overlay 内 */
    top: 14%;                                                   /* 顶 14%×951=133, 距擦除区顶 68 还多 65px 余量 */
    bottom: 4%;                                                 /* 底 4%×951=38 from底, 卡底=913, 距擦除区底 942 还多 29px 余量 */
    left: 61.5%;                                                /* 左 61.5%×1672=1028, 距擦除区左 1003 多 25px 余量 */
    width: 33.5%;                                               /* 宽 33.5%×1672=560, 卡右=1588, 距擦除区右 1610 多 22px 余量 */
    background: #ffffff;                                        /* 纯白底（不透明），与擦除区羽化白底完美融合 */
    border-radius: clamp(8px, 0.8cqi, 14px);                    /* 圆角随 stage 缩放，最小 8px 最大 14px */
    box-shadow: 0 8px 28px rgba(20, 30, 60, 0.15);              /* 卡身阴影 */
    padding: clamp(14px, 1.7cqi, 28px) clamp(16px, 2.3cqi, 38px) clamp(12px, 1.6cqi, 26px);  /* 内 padding 随 stage 缩放 */
    box-sizing: border-box;                                     /* padding 计入宽高 */
    display: flex;                                              /* flex 列布局 */
    flex-direction: column;                                     /* 纵向排 */
    justify-content: center;                                    /* 内容垂直居中，避免卡高时上下空白 */
    z-index: 5;                                                 /* 在 overlay 内最上层 */
    gap: clamp(6px, 0.9cqi, 14px);                              /* 卡内各 section 之间间距随 stage 缩放 */
}

/* 卡标题：欢迎登录 (lv6: 字号随 stage 缩放) */
.lv5-card-title {
    margin: 0;                                                  /* 去掉默认 margin */
    font-size: clamp(18px, 1.8cqi, 28px);                       /* 字号随 stage 宽缩放 18~28px */
    font-weight: 700;                                           /* 加粗 */
    color: #111827;                                             /* 近黑 */
    text-align: center;                                         /* 居中 */
    letter-spacing: 1px;                                        /* 字距，跟原稿气质一致 */
}

/* 卡副标题：登录初先 TrueX 管理系统 (lv6: 字号随 stage 缩放) */
.lv5-card-subtitle {
    margin: clamp(4px, 0.7cqi, 10px) 0 clamp(10px, 1.6cqi, 24px); /* 上下间距随 stage 缩放 */
    font-size: clamp(11px, 0.9cqi, 14px);                       /* 副标字号随 stage 缩放 */
    color: #6b7280;                                             /* 灰色 */
    text-align: center;                                         /* 居中 */
}

/* 副标里 "TrueX" 品牌色高亮 */
.lv5-brand {
    color: #f97316;                                             /* 橙 */
    font-weight: 600;                                           /* 半粗 */
}

/* 错误提示带 */
.lv5-error {
    background: #fef2f2;                                        /* 浅红底 */
    color: #b91c1c;                                             /* 深红字 */
    padding: 10px 12px;                                         /* 内边距 */
    border-radius: 8px;                                         /* 圆角 */
    font-size: 13px;                                            /* 小字 */
    margin-bottom: 16px;                                        /* 与下方字段留距 */
    border: 1px solid #fecaca;                                  /* 浅红边 */
}

/* 字段组：label + input wrap (lv6: 间距随 stage 缩放) */
.lv5-field {
    margin-bottom: clamp(6px, 1cqi, 14px);                      /* 字段间距 6~14px */
}

/* 字段 label：账号/密码 (lv6: 字号 / 间距随 stage 缩放) */
.lv5-label {
    display: block;                                             /* 块级 */
    font-size: clamp(11px, 0.9cqi, 14px);                       /* 字号 11~14px */
    color: #1f2937;                                             /* 深灰 */
    font-weight: 600;                                           /* 半粗 */
    margin-bottom: clamp(3px, 0.5cqi, 8px);                     /* 与下方 input 间距 3~8px */
}

/* input 包装器：用于内嵌左右图标 */
.lv5-input-wrap {
    position: relative;                                         /* 内部图标 absolute 参照 */
    display: flex;                                              /* flex 让 input 自适应 */
    align-items: center;                                        /* 垂直居中 */
}

/* input 本体 (lv6: 高度 / 字号随 stage 缩放) */
.lv5-input {
    width: 100%;                                                /* 占满 wrap */
    height: clamp(30px, 2.9cqi, 44px);                          /* 输入框高 30~44px */
    padding: 0 14px 0 clamp(28px, 2.7cqi, 42px);                /* 左 padding 给图标，右 padding 固定 */
    border: 1px solid #e5e7eb;                                  /* 浅灰边 */
    border-radius: 8px;                                         /* 圆角 */
    background: #fafafa;                                        /* 极浅灰底，跟 09 卡风格一致 */
    font-size: clamp(12px, 0.9cqi, 14px);                       /* 字号 12~14px */
    color: #111827;                                             /* 输入文字色 */
    outline: none;                                              /* 去掉默认 outline */
    box-sizing: border-box;                                     /* padding 计入 */
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

/* input placeholder 样式 */
.lv5-input::placeholder {
    color: #9ca3af;                                             /* 中灰 */
}

/* input focus：橙色边 + 微阴影，明显可见聚焦 */
.lv5-input:focus {
    border-color: #f97316;                                      /* 橙 */
    background: #ffffff;                                        /* 聚焦时纯白底 */
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);             /* 橙色外发光 */
}

/* 密码框右边眼睛：占位右图标，需要更窄 padding */
.lv5-input[type="password"], .lv5-field:has(.lv5-eye) .lv5-input {
    padding-right: 42px;                                        /* 右侧留眼睛位 */
}

/* 左图标：人形/锁 */
.lv5-icon-left {
    position: absolute;                                         /* 绝对在 wrap 内 */
    left: 12px;                                                 /* 左 12 */
    top: 50%;                                                   /* 垂直居中 */
    transform: translateY(-50%);                                /* 居中校正 */
    width: 20px;                                                /* 图标宽 */
    height: 20px;                                               /* 图标高 */
    color: #9ca3af;                                             /* 灰 */
    pointer-events: none;                                       /* 不拦截点击 */
}

/* 右图标按钮：眼睛 */
.lv5-icon-right {
    position: absolute;                                         /* 绝对在 wrap 内 */
    right: 8px;                                                 /* 右 8 */
    top: 50%;                                                   /* 垂直居中 */
    transform: translateY(-50%);                                /* 居中校正 */
    width: 28px;                                                /* 按钮宽 */
    height: 28px;                                               /* 按钮高 */
    border: 0;                                                  /* 去边框 */
    background: transparent;                                    /* 透明底 */
    color: #9ca3af;                                             /* 灰 */
    cursor: pointer;                                            /* 手指 */
    padding: 4px;                                               /* 内边距，扩大点击范围 */
    display: flex;                                              /* flex 居中 SVG */
    align-items: center;
    justify-content: center;
    border-radius: 6px;                                         /* 微圆角 */
    transition: color 0.15s, background 0.15s;
}
.lv5-icon-right:hover {
    color: #f97316;                                             /* hover 橙 */
    background: rgba(249, 115, 22, 0.08);                       /* hover 浅橙底 */
}
.lv5-icon-right svg {
    width: 18px;                                                /* SVG 大小 */
    height: 18px;
}

/* 行：记住账号 + 忘记密码 (lv6: 间距随 stage 缩放) */
.lv5-row {
    display: flex;                                              /* flex 两端对齐 */
    justify-content: space-between;                             /* 左右两端 */
    align-items: center;                                        /* 垂直居中 */
    margin: clamp(2px, 0.4cqi, 4px) 0 clamp(8px, 1.6cqi, 20px); /* 上 2~4 / 下 8~20 */
    font-size: clamp(11px, 0.9cqi, 13px);                       /* 整行字号 11~13 */
}

/* 记住账号 label */
.lv5-remember {
    display: inline-flex;                                       /* inline flex */
    align-items: center;                                        /* 垂直居中 */
    cursor: pointer;                                            /* 手指 */
    user-select: none;                                          /* 防选中 */
    font-size: 13px;                                            /* 字号 */
    color: #4b5563;                                             /* 中灰 */
}

/* 真 checkbox 视觉隐藏 */
.lv5-cb-native {
    position: absolute;                                         /* 绝对脱流 */
    opacity: 0;                                                 /* 隐藏 */
    pointer-events: none;                                       /* 不响应 */
}

/* 自定义 checkbox 视觉框 */
.lv5-cb-visual {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
    border: 1.5px solid #d1d5db;                                /* 灰边 */
    border-radius: 4px;                                         /* 微圆 */
    margin-right: 8px;                                          /* 与文字间距 */
    display: inline-flex;                                       /* inline flex */
    align-items: center;                                        /* 居中 */
    justify-content: center;
    position: relative;                                         /* 内对勾 absolute 用 */
    background: #ffffff;                                        /* 白底 */
    transition: border-color 0.15s, background 0.15s;
}

/* checkbox 勾上时：橙底白勾 */
.lv5-cb-native:checked + .lv5-cb-visual {
    background: #f97316;                                        /* 橙底 */
    border-color: #f97316;                                      /* 橙边 */
}

/* 对勾（伪元素绘制） */
.lv5-cb-native:checked + .lv5-cb-visual::after {
    content: "";                                                /* 触发伪元素 */
    width: 5px;                                                 /* 勾宽 */
    height: 9px;                                                /* 勾高 */
    border-right: 2px solid #ffffff;                            /* 右边 */
    border-bottom: 2px solid #ffffff;                           /* 下边 */
    transform: rotate(45deg) translate(-1px, -1px);             /* 旋转成勾 */
}

/* 忘记密码：右侧橙文字链接 */
.lv5-forgot {
    color: #f97316;                                             /* 橙 */
    font-size: 13px;                                            /* 字号 */
    text-decoration: none;                                      /* 去下划线 */
    cursor: pointer;                                            /* 手指 */
    transition: opacity 0.15s;
}
.lv5-forgot:hover {
    opacity: 0.8;                                               /* hover 淡出 */
    text-decoration: underline;                                 /* hover 加下划线 */
}

/* ===== 主按钮：进入系统 (lv6: 高度 / 字号随 stage 缩放) ===== */
.lv5-btn-primary {
    width: 100%;                                                /* 占满 */
    height: clamp(34px, 3.1cqi, 48px);                          /* 按钮高 34~48px */
    border: 0;                                                  /* 去边 */
    border-radius: 8px;                                         /* 圆角 */
    background: linear-gradient(180deg, #fb923c 0%, #f97316 100%);  /* 橙渐变 */
    color: #ffffff;                                             /* 白字 */
    font-size: clamp(13px, 1.1cqi, 16px);                       /* 字号 13~16px */
    font-weight: 600;                                           /* 半粗 */
    cursor: pointer;                                            /* 手指 */
    display: flex;                                              /* flex 居中 */
    align-items: center;                                        /* 垂直居中 */
    justify-content: center;                                    /* 水平居中 */
    gap: 10px;                                                  /* 文字与箭头间距 */
    letter-spacing: 2px;                                        /* 字距，气质（不要太宽否则像"进 入 系 统"分离） */
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.32);            /* 橙色光晕 */
    transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
}
.lv5-btn-primary:hover {
    filter: brightness(1.05);                                   /* hover 略亮 */
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.42);            /* 阴影加深 */
}
.lv5-btn-primary:active {
    transform: translateY(1px);                                 /* 按下凹陷 */
}

/* 按钮箭头 SVG */
.lv5-btn-arrow {
    width: 18px;                                                /* 宽 */
    height: 18px;                                               /* 高 */
    color: #ffffff;                                             /* 白 */
}

/* "或" 分隔行 (lv6: 间距 / 字号随 stage 缩放) */
.lv5-divider {
    display: flex;                                              /* flex */
    align-items: center;                                        /* 垂直居中 */
    margin: clamp(6px, 1.2cqi, 18px) 0;                         /* 上下 6~18px */
    color: #9ca3af;                                             /* 灰 */
    font-size: clamp(11px, 0.85cqi, 13px);                      /* 字号 11~13px */
}
.lv5-divider::before, .lv5-divider::after {
    content: "";                                                /* 触发伪元素 */
    flex: 1;                                                    /* 撑开两端 */
    height: 1px;                                                /* 横线高 */
    background: #e5e7eb;                                        /* 浅灰线 */
}
.lv5-divider span {
    padding: 0 14px;                                            /* 文字左右间距 */
}

/* ===== 次按钮：使用验证码登录 (lv6: 高度 / 字号随 stage 缩放) ===== */
.lv5-btn-secondary {
    width: 100%;                                                /* 占满 */
    height: clamp(32px, 3cqi, 46px);                            /* 按钮高 32~46px */
    border: 1px solid #fed7aa;                                  /* 浅橙边 */
    border-radius: 8px;                                         /* 圆角 */
    background: #ffffff;                                        /* 白底 */
    color: #f97316;                                             /* 橙字 */
    font-size: clamp(12px, 0.95cqi, 14px);                      /* 字号 12~14px */
    font-weight: 600;                                           /* 半粗 */
    cursor: pointer;                                            /* 手指 */
    display: flex;                                              /* flex 居中 */
    align-items: center;
    justify-content: center;
    gap: 8px;                                                   /* 图标与文字间距 */
    transition: background 0.15s, border-color 0.15s;
}
.lv5-btn-secondary:hover {
    background: #fff7ed;                                        /* hover 浅橙底 */
    border-color: #fb923c;                                      /* hover 边深一点 */
}

/* 次按钮图标 SVG */
.lv5-btn-icon {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
}

/* ===== 响应式 =====
   1672 以上：stage 锁 1672 不放大
   桌面常见 1280~1600：等比缩放
   平板 768~1023：等比缩放，stage 占 96vw
   手机 < 640：换"只显登录卡"布局 fallback */
@media (max-width: 1366px) {
    .lv5-card {
        padding: 30px 28px 28px;                                /* 卡内 padding 收缩 */
    }
    .lv5-card-title {
        font-size: 24px;                                        /* 标题缩小 */
    }
    .lv5-input {
        height: 40px;                                           /* 输入框缩 */
    }
    .lv5-btn-primary {
        height: 44px;                                           /* 按钮缩 */
        font-size: 15px;
    }
    .lv5-btn-secondary {
        height: 42px;
    }
}

@media (max-width: 1023px) {
    .lv5-stage {
        max-width: 96vw;                                        /* 平板 stage 缩 */
    }
    .lv5-card {
        padding: 22px 20px;                                     /* 卡 padding 再缩 */
    }
    .lv5-card-title {
        font-size: 20px;
    }
    .lv5-card-subtitle {
        font-size: 12px;
        margin-bottom: 16px;
    }
    .lv5-label {
        font-size: 12px;
    }
    .lv5-input {
        height: 36px;
        font-size: 13px;
    }
    .lv5-divider {
        margin: 12px 0;
    }
}

/* 窄屏 fallback：背景图缩太小卡也无法用，所以换"全屏纯卡"布局 */
@media (max-width: 639px) {
    .lv5-body {
        background: linear-gradient(180deg, #fef3c7 0%, #fed7aa 100%);  /* 暖色渐变兜底 */
    }
    .lv5-stage {
        max-width: 100vw;                                       /* 全宽 */
        aspect-ratio: auto;                                     /* 取消比例锁 */
        min-height: 100vh;                                      /* 至少全屏高 */
        box-shadow: none;                                       /* 去阴影 */
    }
    .lv5-bg {
        display: none;                                          /* 隐藏背景图（小屏看不清） */
    }
    .lv5-nav {
        display: none;                                          /* 隐藏顶部 nav 热区（navbar 看不见） */
    }
    .lv5-card {
        position: relative;                                     /* 改 relative，跟随文档流 */
        top: auto;                                              /* 重置 */
        bottom: auto;                                           /* 重置 */
        left: auto;
        width: 90%;
        max-width: 400px;
        margin: 30px auto;                                      /* 居中 */
    }
}

/* lv5 命名空间结束 ========================================================== */


/* ==========================================================================
   lv7 命名空间 (2026-05-24 改首页 ui06 - 第 6 轮)
   核心思想：仿京东登录页 - background-image cover 铺满 viewport + 卡固定 px 尺寸
   解决 lv6 的两侧兜底色暴露 + 卡内容随 viewport 缩放飘忽问题
   三层独立 fixed：
     .lv7-bg     底层：img + object-fit:cover 铺满 100vw×100vh，永不漏底色
     .lv7-topbar 顶层：半透明白底 + backdrop-filter，盖住烤死 navbar
     .lv7-card   浮卡：fixed 右侧居中，固定 px 尺寸不响应 viewport 缩放
   ========================================================================== */

/* body 基础：满视口高、暖色兜底（极端尺寸时若 bg 未及时加载也不闪白） */
.lv7-body {
    margin: 0;                                                  /* 去掉默认 margin */
    padding: 0;                                                 /* 去掉默认 padding */
    min-height: 100vh;                                          /* 至少铺满视口高 */
    background: #fef6e8;                                        /* 暖米色兜底，bg 加载前/出错时不闪白 */
    overflow: hidden;                                           /* 禁止 body 滚动，三层 fixed 不依赖文档流 */
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: #1f2937;                                             /* 默认文字色 */
    -webkit-font-smoothing: antialiased;                        /* 字体抗锯齿 */
    -moz-osx-font-smoothing: grayscale;                         /* Firefox 抗锯齿 */
}

/* 背景层：仿京东 background-size:cover 思路；img + object-fit:cover 铺满 viewport
   关键：position:fixed inset:0 确保任意 viewport 都铺满，无兜底色暴露
   object-position: center 让中心总可见，超出部分按需裁切（cover 必然现象） */
.lv7-bg {
    position: fixed;                                            /* 脱流，相对 viewport 定位 */
    inset: 0;                                                   /* 上下左右贴 viewport 边 */
    width: 100vw;                                               /* 占满视口宽 */
    height: 100vh;                                              /* 占满视口高 */
    object-fit: cover;                                          /* 等比覆盖，超出裁切，永不漏底 */
    object-position: 50% 50%;                                   /* 中心对齐，左右上下尽量保留中段 */
    z-index: 0;                                                 /* 最底层 */
    user-select: none;                                          /* 禁选 */
    pointer-events: none;                                       /* 不拦截鼠标事件 */
    display: block;                                             /* 去 inline 默认间隙 */
}

/* 顶部导航浮层：fixed 顶部 / 半透明白底 + backdrop-filter blur，盖住底下烤死 navbar
   原理：bg 上烤死的"X 初先 TrueX | 安全保障/帮助中心/简体中文"虚化为白底，
   真 HTML 的图标+文字在上层精确响应点击，不再依赖热区与烤死像素对齐 */
.lv7-topbar {
    position: fixed;                                            /* 脱流，固定顶部 */
    top: 0;                                                     /* 贴顶 */
    left: 0;                                                    /* 贴左 */
    right: 0;                                                   /* 贴右，自动宽 100vw */
    height: 64px;                                               /* 固定高 64，参考京东顶栏 */
    /* 半透明白色渐变：上段不透明、下段渐渐透明，让 backdrop-filter 模糊底下烤死文字自然过渡到背景 */
    background: linear-gradient(180deg, rgba(255,247,232,0.94) 0%, rgba(255,247,232,0.82) 60%, rgba(255,247,232,0) 100%);
    backdrop-filter: blur(12px) saturate(1.2);                  /* 真正的"毛玻璃"效果，糊掉烤死 navbar 像素 */
    -webkit-backdrop-filter: blur(12px) saturate(1.2);          /* Safari 兼容 */
    z-index: 10;                                                /* 在 bg 之上，在 card 之下 */
    display: flex;                                              /* 横排两端布局 */
    align-items: center;                                        /* 垂直居中 */
    justify-content: space-between;                             /* 品牌靠左、导航靠右 */
    padding: 0 32px;                                            /* 左右内边距 */
    box-sizing: border-box;                                     /* padding 计入宽 */
}

/* 顶栏左侧品牌区：X 图标 + 中文+英文+「质佳」标签 */
.lv7-brand {
    display: flex;                                              /* 横排 */
    align-items: center;                                        /* 垂直居中 */
    gap: 10px;                                                  /* 各元素间距 */
    font-weight: 700;                                           /* 品牌名加粗 */
    color: #1f2937;                                             /* 深灰 */
    user-select: none;                                          /* 防选中 */
}

/* 品牌图标 X：橙色粗线 */
.lv7-brand-icon {
    width: 28px;                                                /* 宽 */
    height: 28px;                                               /* 高 */
    color: #f97316;                                             /* 橙 */
    flex-shrink: 0;                                             /* 不被挤压 */
}

/* 品牌名 "初先 TrueX"：固定 18px 不缩放 */
.lv7-brand-name {
    font-size: 18px;                                            /* 18px */
    letter-spacing: 0.5px;                                      /* 微字距 */
}

/* 品牌副标 "质佳"：橙色小标签 */
.lv7-brand-sub {
    font-size: 12px;                                            /* 12px */
    color: #f97316;                                             /* 橙字 */
    font-weight: 600;                                           /* 半粗 */
    padding: 2px 8px;                                           /* 内边距 */
    border: 1px solid #fed7aa;                                  /* 浅橙边 */
    border-radius: 4px;                                         /* 微圆角 */
    background: rgba(255, 247, 237, 0.7);                       /* 极浅橙底 */
    margin-left: 2px;                                           /* 与品牌名间距 */
}

/* 顶栏右侧导航链接组 */
.lv7-nav-links {
    display: flex;                                              /* 横排 */
    align-items: center;                                        /* 垂直居中 */
    gap: 4px;                                                   /* 链接间距小，hover 浅底自然 */
}

/* 单个导航链接：图标 + 文字，hover 浅底反馈 */
.lv7-nav-link {
    background: transparent;                                    /* 透明底 */
    border: 0;                                                  /* 去 button 默认边 */
    cursor: pointer;                                            /* 手指 */
    padding: 8px 14px;                                          /* 内边距，扩大点击 */
    font-size: 14px;                                            /* 14px */
    color: #1f2937;                                             /* 深灰 */
    display: inline-flex;                                       /* 横排 */
    align-items: center;                                        /* 垂直居中 */
    gap: 6px;                                                   /* 图标与文字间距 */
    border-radius: 8px;                                         /* 圆角 */
    transition: background 0.15s, color 0.15s;                  /* hover 平滑过渡 */
    font-family: inherit;                                       /* 继承 body 字体 */
}
.lv7-nav-link:hover {
    background: rgba(249, 115, 22, 0.08);                       /* hover 浅橙底 */
    color: #f97316;                                             /* hover 橙字 */
}

/* 导航链接内 SVG 图标 */
.lv7-nav-link svg {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
    color: #f97316;                                             /* 橙图标，与品牌色呼应 */
    flex-shrink: 0;                                             /* 不被挤压 */
}

/* ===== 登录卡：右侧浮动，固定 px 尺寸（参考京东 384×504）=====
   关键：宽用 clamp(340px, 28vw, 440px) 让卡在中尺寸 viewport 有合理浮动，
   但上下界紧凑（340~440），不会像 lv6 一样从 268 到 482 暴跌暴涨。
   高度由内容自适应，所有内部尺寸固定 px，视觉永远稳定。 */
.lv7-card {
    position: fixed;                                            /* 脱流，相对 viewport */
    top: calc(50% + 32px);                                      /* 中心下偏 32，避开 topbar 高 64 的一半，矮屏时卡不撞顶栏 */
    right: clamp(40px, 6vw, 120px);                             /* 右侧偏移，随 viewport 适度调整 */
    transform: translateY(-50%);                                /* 垂直居中校正 */
    width: clamp(340px, 28vw, 440px);                           /* 宽 340~440px，跨越主流尺寸 */
    max-height: calc(100vh - 96px);                             /* 限高：viewport 高减 topbar(64)+底部留白(32)，矮屏不撑爆 */
    overflow-y: auto;                                           /* 矮屏内容可滚动，不致灾难 */
    background: #ffffff;                                        /* 纯白底 */
    border-radius: 14px;                                        /* 圆角 */
    box-shadow: 0 20px 56px rgba(20, 30, 60, 0.22);             /* 强阴影，让卡从背景浮起 */
    padding: 36px 36px 28px;                                    /* 内 padding 固定 */
    box-sizing: border-box;                                     /* padding 计入宽 */
    display: flex;                                              /* 列布局 */
    flex-direction: column;                                     /* 纵向 */
    z-index: 20;                                                /* 顶层 */
    /* 滚动条美化（webkit 浏览器） */
    scrollbar-width: thin;                                      /* Firefox 细滚动条 */
    scrollbar-color: #fed7aa transparent;                       /* Firefox 橙色滚动条 */
}
/* webkit 滚动条美化 */
.lv7-card::-webkit-scrollbar { width: 6px; }
.lv7-card::-webkit-scrollbar-track { background: transparent; }
.lv7-card::-webkit-scrollbar-thumb { background: #fed7aa; border-radius: 3px; }
.lv7-card::-webkit-scrollbar-thumb:hover { background: #fb923c; }

/* 卡标题：欢迎登录（固定 26px） */
.lv7-card-title {
    margin: 0;                                                  /* 去默认 margin */
    font-size: 26px;                                            /* 固定 26px */
    font-weight: 700;                                           /* 加粗 */
    color: #111827;                                             /* 近黑 */
    text-align: center;                                         /* 居中 */
    letter-spacing: 2px;                                        /* 字距，气质 */
}

/* 卡副标题：登录初先 TrueX 管理系统（固定 13px） */
.lv7-card-subtitle {
    margin: 8px 0 26px;                                         /* 上 8 / 下 26 */
    font-size: 13px;                                            /* 固定 13px */
    color: #6b7280;                                             /* 中灰 */
    text-align: center;                                         /* 居中 */
}

/* 副标里 "TrueX" 品牌色 */
.lv7-brand-hl {
    color: #f97316;                                             /* 橙 */
    font-weight: 600;                                           /* 半粗 */
}

/* 错误提示带 */
.lv7-error {
    background: #fef2f2;                                        /* 浅红底 */
    color: #b91c1c;                                             /* 深红字 */
    padding: 10px 12px;                                         /* 内边距 */
    border-radius: 8px;                                         /* 圆角 */
    font-size: 13px;                                            /* 小字 */
    margin-bottom: 16px;                                        /* 与下方间距 */
    border: 1px solid #fecaca;                                  /* 浅红边 */
}

/* 字段组：label + input wrap */
.lv7-field {
    margin-bottom: 16px;                                        /* 字段间距固定 */
}

/* 字段 label */
.lv7-label {
    display: block;                                             /* 块级 */
    font-size: 14px;                                            /* 固定 14px */
    color: #1f2937;                                             /* 深灰 */
    font-weight: 600;                                           /* 半粗 */
    margin-bottom: 8px;                                         /* 与 input 间距 */
}

/* input 包装器 */
.lv7-input-wrap {
    position: relative;                                         /* 内部 absolute 图标参照 */
    display: flex;                                              /* flex 让 input 自适应 */
    align-items: center;                                        /* 垂直居中 */
}

/* input 本体 */
.lv7-input {
    width: 100%;                                                /* 占满 wrap */
    height: 44px;                                               /* 固定 44px */
    padding: 0 14px 0 42px;                                     /* 左 42 给图标，右 14 默认 */
    border: 1px solid #e5e7eb;                                  /* 浅灰边 */
    border-radius: 8px;                                         /* 圆角 */
    background: #fafafa;                                        /* 极浅灰底 */
    font-size: 14px;                                            /* 固定 14px */
    color: #111827;                                             /* 输入文字深 */
    outline: none;                                              /* 去 outline */
    box-sizing: border-box;                                     /* padding 计入 */
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    font-family: inherit;                                       /* 继承 body 字体 */
}
.lv7-input::placeholder {
    color: #9ca3af;                                             /* 中灰 placeholder */
}
.lv7-input:focus {
    border-color: #f97316;                                      /* 橙边 */
    background: #ffffff;                                        /* 聚焦白底 */
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);             /* 橙发光 */
}
/* 密码框右边眼睛留位 */
.lv7-input[type="password"], .lv7-field:has(.lv7-eye) .lv7-input {
    padding-right: 44px;                                        /* 右侧给眼睛 */
}

/* 左图标 */
.lv7-icon-left {
    position: absolute;                                         /* 绝对在 wrap 内 */
    left: 12px;                                                 /* 左 12 */
    top: 50%;                                                   /* 垂直中线 */
    transform: translateY(-50%);                                /* 居中校正 */
    width: 20px;                                                /* 宽 */
    height: 20px;                                               /* 高 */
    color: #9ca3af;                                             /* 灰 */
    pointer-events: none;                                       /* 不拦截 */
}

/* 右图标按钮：眼睛 */
.lv7-icon-right {
    position: absolute;                                         /* 绝对在 wrap 内 */
    right: 8px;                                                 /* 右 8 */
    top: 50%;                                                   /* 垂直中线 */
    transform: translateY(-50%);                                /* 居中校正 */
    width: 28px;                                                /* 宽 */
    height: 28px;                                               /* 高 */
    border: 0;                                                  /* 去边 */
    background: transparent;                                    /* 透明 */
    color: #9ca3af;                                             /* 灰 */
    cursor: pointer;                                            /* 手指 */
    padding: 4px;                                               /* 内边 */
    display: flex;                                              /* 居中 SVG */
    align-items: center;
    justify-content: center;
    border-radius: 6px;                                         /* 微圆 */
    transition: color 0.15s, background 0.15s;
}
.lv7-icon-right:hover {
    color: #f97316;                                             /* hover 橙 */
    background: rgba(249, 115, 22, 0.08);                       /* hover 浅橙底 */
}
.lv7-icon-right svg {
    width: 18px;                                                /* SVG 大小 */
    height: 18px;
}

/* 行：记住账号 + 忘记密码 */
.lv7-row {
    display: flex;                                              /* 两端 */
    justify-content: space-between;                             /* 左右 */
    align-items: center;                                        /* 垂直居中 */
    margin: 4px 0 20px;                                         /* 上 4 / 下 20 */
    font-size: 13px;                                            /* 整行字号 */
}

/* 记住账号 label */
.lv7-remember {
    display: inline-flex;                                       /* inline flex */
    align-items: center;                                        /* 垂直居中 */
    cursor: pointer;                                            /* 手指 */
    user-select: none;                                          /* 防选中 */
    font-size: 13px;                                            /* 13 */
    color: #4b5563;                                             /* 中灰 */
}

/* 真 checkbox 视觉隐藏 */
.lv7-cb-native {
    position: absolute;                                         /* 脱流 */
    opacity: 0;                                                 /* 隐藏 */
    pointer-events: none;                                       /* 不响应 */
}

/* 自定义 checkbox 视觉框 */
.lv7-cb-visual {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
    border: 1.5px solid #d1d5db;                                /* 灰边 */
    border-radius: 4px;                                         /* 微圆 */
    margin-right: 8px;                                          /* 与文字间距 */
    display: inline-flex;                                       /* inline flex */
    align-items: center;                                        /* 居中 */
    justify-content: center;
    position: relative;                                         /* 对勾 absolute 参照 */
    background: #ffffff;                                        /* 白底 */
    transition: border-color 0.15s, background 0.15s;
}

/* checkbox 勾上时：橙底白勾 */
.lv7-cb-native:checked + .lv7-cb-visual {
    background: #f97316;                                        /* 橙底 */
    border-color: #f97316;                                      /* 橙边 */
}

/* 对勾（伪元素） */
.lv7-cb-native:checked + .lv7-cb-visual::after {
    content: "";                                                /* 触发 */
    width: 5px;                                                 /* 勾宽 */
    height: 9px;                                                /* 勾高 */
    border-right: 2px solid #ffffff;                            /* 右 */
    border-bottom: 2px solid #ffffff;                           /* 下 */
    transform: rotate(45deg) translate(-1px, -1px);             /* 旋转成勾 */
}

/* 忘记密码：橙文字链接 */
.lv7-forgot {
    color: #f97316;                                             /* 橙 */
    font-size: 13px;                                            /* 13 */
    text-decoration: none;                                      /* 去下划线 */
    cursor: pointer;                                            /* 手指 */
    transition: opacity 0.15s;
}
.lv7-forgot:hover {
    opacity: 0.8;                                               /* hover 淡出 */
    text-decoration: underline;                                 /* hover 下划线 */
}

/* ===== 主按钮：进入系统 ===== */
.lv7-btn-primary {
    width: 100%;                                                /* 占满 */
    height: 46px;                                               /* 固定 46 */
    border: 0;                                                  /* 去边 */
    border-radius: 8px;                                         /* 圆角 */
    background: linear-gradient(180deg, #fb923c 0%, #f97316 100%);  /* 橙渐变 */
    color: #ffffff;                                             /* 白字 */
    font-size: 15px;                                            /* 15 */
    font-weight: 600;                                           /* 半粗 */
    cursor: pointer;                                            /* 手指 */
    display: flex;                                              /* 居中 */
    align-items: center;
    justify-content: center;
    gap: 10px;                                                  /* 文字与箭头间距 */
    letter-spacing: 2px;                                        /* 字距 */
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.32);            /* 橙光晕 */
    transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
    font-family: inherit;                                       /* 继承字体 */
}
.lv7-btn-primary:hover {
    filter: brightness(1.05);                                   /* 略亮 */
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.42);            /* 阴影加深 */
}
.lv7-btn-primary:active {
    transform: translateY(1px);                                 /* 按下凹陷 */
}

/* 按钮箭头 */
.lv7-btn-arrow {
    width: 18px;                                                /* 宽 */
    height: 18px;                                               /* 高 */
    color: #ffffff;                                             /* 白 */
}

/* "或" 分隔行 */
.lv7-divider {
    display: flex;                                              /* flex */
    align-items: center;                                        /* 居中 */
    margin: 16px 0;                                             /* 上下 16 */
    color: #9ca3af;                                             /* 灰 */
    font-size: 12px;                                            /* 12 */
}
.lv7-divider::before, .lv7-divider::after {
    content: "";                                                /* 触发伪元素 */
    flex: 1;                                                    /* 撑两端 */
    height: 1px;                                                /* 线高 */
    background: #e5e7eb;                                        /* 浅灰 */
}
.lv7-divider span {
    padding: 0 14px;                                            /* 文字左右间距 */
}

/* ===== 次按钮：使用验证码登录 ===== */
.lv7-btn-secondary {
    width: 100%;                                                /* 占满 */
    height: 44px;                                               /* 固定 44 */
    border: 1px solid #fed7aa;                                  /* 浅橙边 */
    border-radius: 8px;                                         /* 圆角 */
    background: #ffffff;                                        /* 白底 */
    color: #f97316;                                             /* 橙字 */
    font-size: 14px;                                            /* 14 */
    font-weight: 600;                                           /* 半粗 */
    cursor: pointer;                                            /* 手指 */
    display: flex;                                              /* 居中 */
    align-items: center;
    justify-content: center;
    gap: 8px;                                                   /* 图标与文字间距 */
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;                                       /* 继承字体 */
}
.lv7-btn-secondary:hover {
    background: #fff7ed;                                        /* hover 浅橙底 */
    border-color: #fb923c;                                      /* hover 边深 */
}

/* 次按钮图标 */
.lv7-btn-icon {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
}

/* ===== 响应式 =====
   思路：卡用 clamp 在 340~440px 之间小幅伸缩，再窄就改"居中铺开"布局 */

/* 平板 / 中尺寸 viewport：卡可缩，导航字号微调 */
@media (max-width: 1024px) {
    .lv7-topbar { padding: 0 20px; }                            /* 顶栏左右 padding 收 */
    .lv7-nav-link { padding: 6px 10px; font-size: 13px; }       /* 链接字号缩 */
    .lv7-card { right: clamp(20px, 4vw, 60px); }                /* 卡更靠右一些 */
}

/* 窄屏：卡居中铺开（之前是右侧浮动，窄屏看不下两侧风景，居中更舒适） */
@media (max-width: 768px) {
    .lv7-card {
        right: auto;                                            /* 取消右贴 */
        left: 50%;                                              /* 水平中 */
        transform: translate(-50%, -50%);                       /* 居中校正 */
        width: calc(100% - 32px);                               /* 占满除 32px 外 */
        max-width: 400px;                                       /* 最宽 400 */
        padding: 28px 24px 22px;                                /* padding 略缩 */
    }
    .lv7-card-title { font-size: 22px; letter-spacing: 1px; }   /* 标题略缩 */
    .lv7-card-subtitle { margin: 6px 0 20px; }
    .lv7-topbar { padding: 0 14px; height: 56px; }              /* 顶栏更紧 */
    .lv7-brand-name { font-size: 16px; }                        /* 品牌名缩 */
    .lv7-brand-icon { width: 24px; height: 24px; }              /* 图标缩 */
    .lv7-brand-sub { font-size: 11px; padding: 1px 6px; }       /* 副标缩 */
    .lv7-nav-link span { display: none; }                       /* 隐藏文字，只留图标，节省空间 */
    .lv7-nav-link { padding: 8px; }                             /* 图标按钮 padding */
}

/* 手机超窄：背景偏右展示（让登录卡区那侧更可见） */
@media (max-width: 480px) {
    .lv7-bg { object-position: 70% 50%; }                       /* 偏右 */
    .lv7-card { padding: 22px 18px 18px; }                      /* padding 再紧 */
    .lv7-card-title { font-size: 20px; }                        /* 标题更缩 */
    .lv7-input { height: 40px; font-size: 13px; }               /* 输入框缩 */
    .lv7-btn-primary { height: 42px; font-size: 14px; }         /* 主按钮缩 */
    .lv7-btn-secondary { height: 40px; font-size: 13px; }       /* 次按钮缩 */
}

/* lv7 命名空间结束 ========================================================== */


/* ==========================================================================
   lv8 命名空间 (2026-05-25 改首页 ui07 - 第 7 轮)
   核心改动：用扩图后的 bg_v6.png（右半留白被拉伸+模糊填成暖色调色块）替换 bg_v5.png
   解决 lv7 时背景图右半为纯白导致卡浮在虚白区的观感问题
   其余结构延续 lv7 三层独立 fixed (bg / topbar / card) 思路，参数微调：
     - .lv8-bg     : 引用 lv8/bg_v6.png；object-position 略偏左让左侧山水风景更突出
     - .lv8-topbar : 同 lv7 半透明白底 + backdrop-filter
     - .lv8-card   : 阴影加深（与 bg_v6.png 右半暖色调形成更明显视觉分层）
   ========================================================================== */

/* body 基础：满视口高、暖色兜底色与 bg_v6.png 右半色调匹配 */
.lv8-body {
    margin: 0;                                                  /* 去掉默认 margin */
    padding: 0;                                                 /* 去掉默认 padding */
    min-height: 100vh;                                          /* 至少铺满视口高 */
    background: #fef6e8;                                        /* 暖米色兜底（与 bg 右半色调一致，加载延迟不闪白） */
    overflow: hidden;                                           /* 禁止 body 滚动，三层 fixed 不依赖文档流 */
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: #1f2937;                                             /* 默认文字色 */
    -webkit-font-smoothing: antialiased;                        /* 字体抗锯齿 */
    -moz-osx-font-smoothing: grayscale;                         /* Firefox 抗锯齿 */
}

/* 背景层：img + object-fit:cover 铺满 viewport
   关键：使用扩图后的 bg_v6.png，右半已是柔和暖色调色块，再无白色虚白
   object-position 50% 50%：保持居中，左侧标题区与右侧扩展区平衡 */
.lv8-bg {
    position: fixed;                                            /* 脱流，相对 viewport 定位 */
    inset: 0;                                                   /* 上下左右贴 viewport 边 */
    width: 100vw;                                               /* 占满视口宽 */
    height: 100vh;                                              /* 占满视口高 */
    object-fit: cover;                                          /* 等比覆盖，超出裁切，永不漏底 */
    object-position: 50% 50%;                                   /* 中心对齐 */
    z-index: 0;                                                 /* 最底层 */
    user-select: none;                                          /* 禁选 */
    pointer-events: none;                                       /* 不拦截鼠标事件 */
    display: block;                                             /* 去 inline 默认间隙 */
}

/* 顶部导航浮层：fixed 顶部 / 半透明白底 + backdrop-filter blur（同 lv7） */
.lv8-topbar {
    position: fixed;                                            /* 脱流，固定顶部 */
    top: 0;                                                     /* 贴顶 */
    left: 0;                                                    /* 贴左 */
    right: 0;                                                   /* 贴右，自动宽 100vw */
    height: 64px;                                               /* 固定高 64 */
    /* 半透明渐变白底：上 94% / 中 82% / 下 0% 让 backdrop-filter 过渡自然 */
    background: linear-gradient(180deg, rgba(255,247,232,0.94) 0%, rgba(255,247,232,0.82) 60%, rgba(255,247,232,0) 100%);
    backdrop-filter: blur(12px) saturate(1.2);                  /* 毛玻璃糊掉烤死 navbar */
    -webkit-backdrop-filter: blur(12px) saturate(1.2);          /* Safari 兼容 */
    z-index: 10;                                                /* 在 bg 之上、card 之下 */
    display: flex;                                              /* 横排两端布局 */
    align-items: center;                                        /* 垂直居中 */
    justify-content: space-between;                             /* 品牌靠左、导航靠右 */
    padding: 0 32px;                                            /* 左右内边距 */
    box-sizing: border-box;                                     /* padding 计入宽 */
}

/* 顶栏左侧品牌区 */
.lv8-brand {
    display: flex;                                              /* 横排 */
    align-items: center;                                        /* 垂直居中 */
    gap: 10px;                                                  /* 各元素间距 */
    font-weight: 700;                                           /* 品牌名加粗 */
    color: #1f2937;                                             /* 深灰 */
    user-select: none;                                          /* 防选中 */
}

/* 品牌图标 X */
.lv8-brand-icon {
    width: 28px;                                                /* 宽 */
    height: 28px;                                               /* 高 */
    color: #f97316;                                             /* 橙 */
    flex-shrink: 0;                                             /* 不被挤压 */
}

/* 品牌名 "初先 TrueX" */
.lv8-brand-name {
    font-size: 18px;                                            /* 18px */
    letter-spacing: 0.5px;                                      /* 微字距 */
}

/* 品牌副标 "质佳" */
.lv8-brand-sub {
    font-size: 12px;                                            /* 12px */
    color: #f97316;                                             /* 橙字 */
    font-weight: 600;                                           /* 半粗 */
    padding: 2px 8px;                                           /* 内边距 */
    border: 1px solid #fed7aa;                                  /* 浅橙边 */
    border-radius: 4px;                                         /* 微圆角 */
    background: rgba(255, 247, 237, 0.7);                       /* 极浅橙底 */
    margin-left: 2px;                                           /* 与品牌名间距 */
}

/* 顶栏右侧导航链接组 */
.lv8-nav-links {
    display: flex;                                              /* 横排 */
    align-items: center;                                        /* 垂直居中 */
    gap: 4px;                                                   /* 链接间距 */
}

/* 单个导航链接 */
.lv8-nav-link {
    background: transparent;                                    /* 透明底 */
    border: 0;                                                  /* 去 button 默认边 */
    cursor: pointer;                                            /* 手指 */
    padding: 8px 14px;                                          /* 内边距 */
    font-size: 14px;                                            /* 14px */
    color: #1f2937;                                             /* 深灰 */
    display: inline-flex;                                       /* 横排 */
    align-items: center;                                        /* 垂直居中 */
    gap: 6px;                                                   /* 图标与文字间距 */
    border-radius: 8px;                                         /* 圆角 */
    transition: background 0.15s, color 0.15s;                  /* hover 过渡 */
    font-family: inherit;                                       /* 继承 body 字体 */
}
.lv8-nav-link:hover {
    background: rgba(249, 115, 22, 0.08);                       /* hover 浅橙底 */
    color: #f97316;                                             /* hover 橙字 */
}

/* 导航链接内 SVG 图标 */
.lv8-nav-link svg {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
    color: #f97316;                                             /* 橙 */
    flex-shrink: 0;                                             /* 不被挤压 */
}

/* ===== 登录卡：右侧浮动，固定 px 尺寸 =====
   lv8 微调：阴影加深 (rgba 0.28 + 大半径)，让卡在 bg_v6 暖色调右半上更显眼 */
.lv8-card {
    position: fixed;                                            /* 脱流，相对 viewport */
    top: calc(50% + 32px);                                      /* 中心下偏 32 避开 topbar */
    right: clamp(40px, 6vw, 120px);                             /* 右侧偏移 */
    transform: translateY(-50%);                                /* 垂直居中校正 */
    width: clamp(340px, 28vw, 440px);                           /* 宽 340~440 */
    max-height: calc(100vh - 96px);                             /* 限高，矮屏不撑爆 */
    overflow-y: auto;                                           /* 矮屏可滚动 */
    background: #ffffff;                                        /* 纯白底 */
    border-radius: 14px;                                        /* 圆角 */
    /* 阴影增强：lv7 用 0.22 在 bg_v6 暖色调右半下不够分明，加深到 0.28 + 24/64 */
    box-shadow: 0 24px 64px rgba(20, 30, 60, 0.28);
    padding: 36px 36px 28px;                                    /* 内 padding */
    box-sizing: border-box;                                     /* padding 计入宽 */
    display: flex;                                              /* 列布局 */
    flex-direction: column;                                     /* 纵向 */
    z-index: 20;                                                /* 顶层 */
    scrollbar-width: thin;                                      /* Firefox 细滚动条 */
    scrollbar-color: #fed7aa transparent;                       /* Firefox 橙色滚动条 */
}
/* webkit 滚动条美化 */
.lv8-card::-webkit-scrollbar { width: 6px; }
.lv8-card::-webkit-scrollbar-track { background: transparent; }
.lv8-card::-webkit-scrollbar-thumb { background: #fed7aa; border-radius: 3px; }
.lv8-card::-webkit-scrollbar-thumb:hover { background: #fb923c; }

/* 卡标题：欢迎登录 */
.lv8-card-title {
    margin: 0;                                                  /* 去默认 margin */
    font-size: 26px;                                            /* 固定 26px */
    font-weight: 700;                                           /* 加粗 */
    color: #111827;                                             /* 近黑 */
    text-align: center;                                         /* 居中 */
    letter-spacing: 2px;                                        /* 字距 */
}

/* 卡副标题 */
.lv8-card-subtitle {
    margin: 8px 0 26px;                                         /* 上 8 / 下 26 */
    font-size: 13px;                                            /* 固定 13px */
    color: #6b7280;                                             /* 中灰 */
    text-align: center;                                         /* 居中 */
}

/* 副标里 "TrueX" 品牌色 */
.lv8-brand-hl {
    color: #f97316;                                             /* 橙 */
    font-weight: 600;                                           /* 半粗 */
}

/* 错误提示带 */
.lv8-error {
    background: #fef2f2;                                        /* 浅红底 */
    color: #b91c1c;                                             /* 深红字 */
    padding: 10px 12px;                                         /* 内边距 */
    border-radius: 8px;                                         /* 圆角 */
    font-size: 13px;                                            /* 小字 */
    margin-bottom: 16px;                                        /* 与下方间距 */
    border: 1px solid #fecaca;                                  /* 浅红边 */
}

/* 字段组：label + input wrap */
.lv8-field {
    margin-bottom: 16px;                                        /* 字段间距 */
}

/* 字段 label */
.lv8-label {
    display: block;                                             /* 块级 */
    font-size: 14px;                                            /* 固定 14px */
    color: #1f2937;                                             /* 深灰 */
    font-weight: 600;                                           /* 半粗 */
    margin-bottom: 8px;                                         /* 与 input 间距 */
}

/* input 包装器 */
.lv8-input-wrap {
    position: relative;                                         /* 内部 absolute 图标参照 */
    display: flex;                                              /* flex 让 input 自适应 */
    align-items: center;                                        /* 垂直居中 */
}

/* input 本体 */
.lv8-input {
    width: 100%;                                                /* 占满 wrap */
    height: 44px;                                               /* 固定 44px */
    padding: 0 14px 0 42px;                                     /* 左 42 给图标 */
    border: 1px solid #e5e7eb;                                  /* 浅灰边 */
    border-radius: 8px;                                         /* 圆角 */
    background: #fafafa;                                        /* 极浅灰底 */
    font-size: 14px;                                            /* 固定 14px */
    color: #111827;                                             /* 输入文字深 */
    outline: none;                                              /* 去 outline */
    box-sizing: border-box;                                     /* padding 计入 */
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    font-family: inherit;                                       /* 继承 body 字体 */
}
.lv8-input::placeholder {
    color: #9ca3af;                                             /* 中灰 placeholder */
}
.lv8-input:focus {
    border-color: #f97316;                                      /* 橙边 */
    background: #ffffff;                                        /* 聚焦白底 */
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);             /* 橙发光 */
}
/* 密码框右边眼睛留位 */
.lv8-input[type="password"], .lv8-field:has(.lv8-eye) .lv8-input {
    padding-right: 44px;                                        /* 右侧给眼睛 */
}

/* 左图标 */
.lv8-icon-left {
    position: absolute;                                         /* 绝对在 wrap 内 */
    left: 12px;                                                 /* 左 12 */
    top: 50%;                                                   /* 垂直中线 */
    transform: translateY(-50%);                                /* 居中校正 */
    width: 20px;                                                /* 宽 */
    height: 20px;                                               /* 高 */
    color: #9ca3af;                                             /* 灰 */
    pointer-events: none;                                       /* 不拦截 */
}

/* 右图标按钮：眼睛 */
.lv8-icon-right {
    position: absolute;                                         /* 绝对在 wrap 内 */
    right: 8px;                                                 /* 右 8 */
    top: 50%;                                                   /* 垂直中线 */
    transform: translateY(-50%);                                /* 居中校正 */
    width: 28px;                                                /* 宽 */
    height: 28px;                                               /* 高 */
    border: 0;                                                  /* 去边 */
    background: transparent;                                    /* 透明 */
    color: #9ca3af;                                             /* 灰 */
    cursor: pointer;                                            /* 手指 */
    padding: 4px;                                               /* 内边 */
    display: flex;                                              /* 居中 SVG */
    align-items: center;
    justify-content: center;
    border-radius: 6px;                                         /* 微圆 */
    transition: color 0.15s, background 0.15s;
}
.lv8-icon-right:hover {
    color: #f97316;                                             /* hover 橙 */
    background: rgba(249, 115, 22, 0.08);                       /* hover 浅橙底 */
}
.lv8-icon-right svg {
    width: 18px;                                                /* SVG 大小 */
    height: 18px;
}

/* 行：记住账号 + 忘记密码 */
.lv8-row {
    display: flex;                                              /* 两端 */
    justify-content: space-between;                             /* 左右 */
    align-items: center;                                        /* 垂直居中 */
    margin: 4px 0 20px;                                         /* 上 4 / 下 20 */
    font-size: 13px;                                            /* 整行字号 */
}

/* 记住账号 label */
.lv8-remember {
    display: inline-flex;                                       /* inline flex */
    align-items: center;                                        /* 垂直居中 */
    cursor: pointer;                                            /* 手指 */
    user-select: none;                                          /* 防选中 */
    font-size: 13px;                                            /* 13 */
    color: #4b5563;                                             /* 中灰 */
}

/* 真 checkbox 视觉隐藏 */
.lv8-cb-native {
    position: absolute;                                         /* 脱流 */
    opacity: 0;                                                 /* 隐藏 */
    pointer-events: none;                                       /* 不响应 */
}

/* 自定义 checkbox 视觉框 */
.lv8-cb-visual {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
    border: 1.5px solid #d1d5db;                                /* 灰边 */
    border-radius: 4px;                                         /* 微圆 */
    margin-right: 8px;                                          /* 与文字间距 */
    display: inline-flex;                                       /* inline flex */
    align-items: center;                                        /* 居中 */
    justify-content: center;
    position: relative;                                         /* 对勾 absolute 参照 */
    background: #ffffff;                                        /* 白底 */
    transition: border-color 0.15s, background 0.15s;
}

/* checkbox 勾上：橙底白勾 */
.lv8-cb-native:checked + .lv8-cb-visual {
    background: #f97316;                                        /* 橙底 */
    border-color: #f97316;                                      /* 橙边 */
}

/* 对勾（伪元素） */
.lv8-cb-native:checked + .lv8-cb-visual::after {
    content: "";                                                /* 触发 */
    width: 5px;                                                 /* 勾宽 */
    height: 9px;                                                /* 勾高 */
    border-right: 2px solid #ffffff;                            /* 右 */
    border-bottom: 2px solid #ffffff;                           /* 下 */
    transform: rotate(45deg) translate(-1px, -1px);             /* 旋转成勾 */
}

/* 忘记密码：橙文字链接 */
.lv8-forgot {
    color: #f97316;                                             /* 橙 */
    font-size: 13px;                                            /* 13 */
    text-decoration: none;                                      /* 去下划线 */
    cursor: pointer;                                            /* 手指 */
    transition: opacity 0.15s;
}
.lv8-forgot:hover {
    opacity: 0.8;                                               /* hover 淡出 */
    text-decoration: underline;                                 /* hover 下划线 */
}

/* ===== 主按钮：进入系统 ===== */
.lv8-btn-primary {
    width: 100%;                                                /* 占满 */
    height: 46px;                                               /* 固定 46 */
    border: 0;                                                  /* 去边 */
    border-radius: 8px;                                         /* 圆角 */
    background: linear-gradient(180deg, #fb923c 0%, #f97316 100%);  /* 橙渐变 */
    color: #ffffff;                                             /* 白字 */
    font-size: 15px;                                            /* 15 */
    font-weight: 600;                                           /* 半粗 */
    cursor: pointer;                                            /* 手指 */
    display: flex;                                              /* 居中 */
    align-items: center;
    justify-content: center;
    gap: 10px;                                                  /* 文字与箭头间距 */
    letter-spacing: 2px;                                        /* 字距 */
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.32);            /* 橙光晕 */
    transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
    font-family: inherit;                                       /* 继承字体 */
}
.lv8-btn-primary:hover {
    filter: brightness(1.05);                                   /* 略亮 */
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.42);            /* 阴影加深 */
}
.lv8-btn-primary:active {
    transform: translateY(1px);                                 /* 按下凹陷 */
}

/* 按钮箭头 */
.lv8-btn-arrow {
    width: 18px;                                                /* 宽 */
    height: 18px;                                               /* 高 */
    color: #ffffff;                                             /* 白 */
}

/* "或" 分隔行 */
.lv8-divider {
    display: flex;                                              /* flex */
    align-items: center;                                        /* 居中 */
    margin: 16px 0;                                             /* 上下 16 */
    color: #9ca3af;                                             /* 灰 */
    font-size: 12px;                                            /* 12 */
}
.lv8-divider::before, .lv8-divider::after {
    content: "";                                                /* 触发伪元素 */
    flex: 1;                                                    /* 撑两端 */
    height: 1px;                                                /* 线高 */
    background: #e5e7eb;                                        /* 浅灰 */
}
.lv8-divider span {
    padding: 0 14px;                                            /* 文字左右间距 */
}

/* ===== 次按钮：使用验证码登录 ===== */
.lv8-btn-secondary {
    width: 100%;                                                /* 占满 */
    height: 44px;                                               /* 固定 44 */
    border: 1px solid #fed7aa;                                  /* 浅橙边 */
    border-radius: 8px;                                         /* 圆角 */
    background: #ffffff;                                        /* 白底 */
    color: #f97316;                                             /* 橙字 */
    font-size: 14px;                                            /* 14 */
    font-weight: 600;                                           /* 半粗 */
    cursor: pointer;                                            /* 手指 */
    display: flex;                                              /* 居中 */
    align-items: center;
    justify-content: center;
    gap: 8px;                                                   /* 图标与文字间距 */
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;                                       /* 继承字体 */
}
.lv8-btn-secondary:hover {
    background: #fff7ed;                                        /* hover 浅橙底 */
    border-color: #fb923c;                                      /* hover 边深 */
}

/* 次按钮图标 */
.lv8-btn-icon {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
}

/* ===== 响应式 ===== */

/* 平板 / 中尺寸 viewport */
@media (max-width: 1024px) {
    .lv8-topbar { padding: 0 20px; }                            /* 顶栏左右 padding 收 */
    .lv8-nav-link { padding: 6px 10px; font-size: 13px; }       /* 链接字号缩 */
    .lv8-card { right: clamp(20px, 4vw, 60px); }                /* 卡更靠右 */
}

/* 窄屏：卡居中铺开 */
@media (max-width: 768px) {
    .lv8-card {
        right: auto;                                            /* 取消右贴 */
        left: 50%;                                              /* 水平中 */
        transform: translate(-50%, -50%);                       /* 居中校正 */
        width: calc(100% - 32px);                               /* 占满除 32px 外 */
        max-width: 400px;                                       /* 最宽 400 */
        padding: 28px 24px 22px;                                /* padding 略缩 */
    }
    .lv8-card-title { font-size: 22px; letter-spacing: 1px; }   /* 标题略缩 */
    .lv8-card-subtitle { margin: 6px 0 20px; }
    .lv8-topbar { padding: 0 14px; height: 56px; }              /* 顶栏更紧 */
    .lv8-brand-name { font-size: 16px; }                        /* 品牌名缩 */
    .lv8-brand-icon { width: 24px; height: 24px; }              /* 图标缩 */
    .lv8-brand-sub { font-size: 11px; padding: 1px 6px; }       /* 副标缩 */
    .lv8-nav-link span { display: none; }                       /* 隐藏文字，留图标 */
    .lv8-nav-link { padding: 8px; }                             /* 图标按钮 padding */
}

/* 手机超窄：背景偏左展示（让书法标题更可见） */
@media (max-width: 480px) {
    .lv8-bg { object-position: 30% 50%; }                       /* 偏左让书法可见 */
    .lv8-card { padding: 22px 18px 18px; }                      /* padding 再紧 */
    .lv8-card-title { font-size: 20px; }                        /* 标题更缩 */
    .lv8-input { height: 40px; font-size: 13px; }               /* 输入框缩 */
    .lv8-btn-primary { height: 42px; font-size: 14px; }         /* 主按钮缩 */
    .lv8-btn-secondary { height: 40px; font-size: 13px; }       /* 次按钮缩 */
}

/* lv8 命名空间结束 ========================================================== */


/* ==========================================================================
   lv9 命名空间 (2026-05-25 改首页 ui07 - 第 7 轮 / 修订版)
   核心改动：用 Claude design 重做的 bg_v6.png 替换 lv8 的 PIL 模糊雾团版
   design 版做了：
     - 左侧风景+书法+主副标语+特性栏完整保留
     - x=750→1100 渐变 fade 到 #FDFBFA cream（接缝自然无硬边）
     - x ≥ 1100 纯 cream（卡覆盖区彻底干净）
     - y ≥ 870 cream（盖掉了原图右下 ©版权那行）
   结构延续 lv8 三层独立 fixed（bg / topbar / card），仅参数微调：
     - .lv9-bg     : 引用 lv9/bg_v6.png（design 干净版）
     - .lv9-body   : 兜底色 #FDFBFA 与 design cream 完全统一
     - .lv9-card   : 阴影适度（design cream 右半与白卡色差比 lv8 雾团版大，阴影改回 lv7 强度 0.22）
   ========================================================================== */

/* body 基础：暖 cream 兜底（与 bg 右半 cream #FDFBFA 完美统一） */
.lv9-body {
    margin: 0;                                                  /* 去掉默认 margin */
    padding: 0;                                                 /* 去掉默认 padding */
    min-height: 100vh;                                          /* 至少铺满视口高 */
    background: #FDFBFA;                                        /* cream 兜底色，与 bg 右半色调统一 */
    overflow: hidden;                                           /* 禁止 body 滚动 */
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: #1f2937;                                             /* 默认文字色 */
    -webkit-font-smoothing: antialiased;                        /* 字体抗锯齿 */
    -moz-osx-font-smoothing: grayscale;                         /* Firefox 抗锯齿 */
}

/* 背景层：引用 design 的 bg_v6.png（1672×951，右半已 fade 为 cream） */
.lv9-bg {
    position: fixed;                                            /* 脱流，相对 viewport */
    inset: 0;                                                   /* 上下左右贴 viewport */
    width: 100vw;                                               /* 占满视口宽 */
    height: 100vh;                                              /* 占满视口高 */
    object-fit: cover;                                          /* 等比覆盖，超出裁切 */
    object-position: 50% 50%;                                   /* 中心对齐 */
    z-index: 0;                                                 /* 最底层 */
    user-select: none;                                          /* 禁选 */
    pointer-events: none;                                       /* 不拦截鼠标事件 */
    display: block;                                             /* 去 inline 默认间隙 */
}

/* 顶部导航浮层（同 lv8，沿用 backdrop-filter 毛玻璃） */
.lv9-topbar {
    position: fixed;                                            /* 脱流，固定顶部 */
    top: 0;                                                     /* 贴顶 */
    left: 0;                                                    /* 贴左 */
    right: 0;                                                   /* 贴右 */
    height: 64px;                                               /* 固定高 64 */
    /* 半透明渐变白底 */
    background: linear-gradient(180deg, rgba(255,247,232,0.94) 0%, rgba(255,247,232,0.82) 60%, rgba(255,247,232,0) 100%);
    backdrop-filter: blur(12px) saturate(1.2);                  /* 毛玻璃糊掉烤死 navbar */
    -webkit-backdrop-filter: blur(12px) saturate(1.2);          /* Safari 兼容 */
    z-index: 10;                                                /* 在 bg 之上、card 之下 */
    display: flex;                                              /* 横排两端布局 */
    align-items: center;                                        /* 垂直居中 */
    justify-content: space-between;                             /* 品牌靠左、导航靠右 */
    padding: 0 32px;                                            /* 左右内边距 */
    box-sizing: border-box;                                     /* padding 计入宽 */
}

/* 顶栏左侧品牌区 */
.lv9-brand {
    display: flex;                                              /* 横排 */
    align-items: center;                                        /* 垂直居中 */
    gap: 10px;                                                  /* 间距 */
    font-weight: 700;                                           /* 加粗 */
    color: #1f2937;                                             /* 深灰 */
    user-select: none;                                          /* 防选中 */
}

/* 品牌图标 X */
.lv9-brand-icon {
    width: 28px;                                                /* 宽 */
    height: 28px;                                               /* 高 */
    color: #f97316;                                             /* 橙 */
    flex-shrink: 0;                                             /* 不被挤压 */
}

/* 品牌名 */
.lv9-brand-name {
    font-size: 18px;                                            /* 18 */
    letter-spacing: 0.5px;                                      /* 微字距 */
}

/* 品牌副标 "质佳" */
.lv9-brand-sub {
    font-size: 12px;                                            /* 12 */
    color: #f97316;                                             /* 橙 */
    font-weight: 600;                                           /* 半粗 */
    padding: 2px 8px;                                           /* 内边距 */
    border: 1px solid #fed7aa;                                  /* 浅橙边 */
    border-radius: 4px;                                         /* 微圆角 */
    background: rgba(255, 247, 237, 0.7);                       /* 极浅橙底 */
    margin-left: 2px;                                           /* 与名间距 */
}

/* 顶栏右侧导航链接组 */
.lv9-nav-links {
    display: flex;                                              /* 横排 */
    align-items: center;                                        /* 垂直居中 */
    gap: 4px;                                                   /* 链接间距 */
}

/* 单个导航链接 */
.lv9-nav-link {
    background: transparent;                                    /* 透明底 */
    border: 0;                                                  /* 去 button 默认边 */
    cursor: pointer;                                            /* 手指 */
    padding: 8px 14px;                                          /* 内边距 */
    font-size: 14px;                                            /* 14 */
    color: #1f2937;                                             /* 深灰 */
    display: inline-flex;                                       /* 横排 */
    align-items: center;                                        /* 垂直居中 */
    gap: 6px;                                                   /* 图标与文字间距 */
    border-radius: 8px;                                         /* 圆角 */
    transition: background 0.15s, color 0.15s;                  /* hover 过渡 */
    font-family: inherit;                                       /* 继承字体 */
}
.lv9-nav-link:hover {
    background: rgba(249, 115, 22, 0.08);                       /* hover 浅橙底 */
    color: #f97316;                                             /* hover 橙字 */
}

/* 导航链接 SVG 图标 */
.lv9-nav-link svg {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
    color: #f97316;                                             /* 橙 */
    flex-shrink: 0;                                             /* 不被挤压 */
}

/* ===== 登录卡：右侧浮动，固定 px 尺寸 =====
   lv9 微调：阴影回到 lv7 强度 0.22（design cream 右半与白卡色差比 lv8 雾团大，无需 lv8 的 0.28 强化） */
.lv9-card {
    position: fixed;                                            /* 脱流，相对 viewport */
    top: calc(50% + 32px);                                      /* 中心下偏 32 避开 topbar */
    right: clamp(40px, 6vw, 120px);                             /* 右侧偏移 */
    transform: translateY(-50%);                                /* 垂直居中校正 */
    width: clamp(340px, 28vw, 440px);                           /* 宽 340~440 */
    max-height: calc(100vh - 96px);                             /* 限高 */
    overflow-y: auto;                                           /* 矮屏可滚动 */
    background: #ffffff;                                        /* 纯白底 */
    border-radius: 14px;                                        /* 圆角 */
    /* 阴影适度：cream 上的白卡 0.22 已经很明显，过强反而生硬 */
    box-shadow: 0 20px 56px rgba(20, 30, 60, 0.22);
    padding: 36px 36px 28px;                                    /* 内 padding */
    box-sizing: border-box;                                     /* padding 计入宽 */
    display: flex;                                              /* 列布局 */
    flex-direction: column;                                     /* 纵向 */
    z-index: 20;                                                /* 顶层 */
    scrollbar-width: thin;                                      /* Firefox 细滚动条 */
    scrollbar-color: #fed7aa transparent;                       /* Firefox 橙色滚动条 */
}
/* webkit 滚动条美化 */
.lv9-card::-webkit-scrollbar { width: 6px; }
.lv9-card::-webkit-scrollbar-track { background: transparent; }
.lv9-card::-webkit-scrollbar-thumb { background: #fed7aa; border-radius: 3px; }
.lv9-card::-webkit-scrollbar-thumb:hover { background: #fb923c; }

/* 卡标题 */
.lv9-card-title {
    margin: 0;                                                  /* 去默认 margin */
    font-size: 26px;                                            /* 26 */
    font-weight: 700;                                           /* 加粗 */
    color: #111827;                                             /* 近黑 */
    text-align: center;                                         /* 居中 */
    letter-spacing: 2px;                                        /* 字距 */
}

/* 卡副标题 */
.lv9-card-subtitle {
    margin: 8px 0 26px;                                         /* 上 8 / 下 26 */
    font-size: 13px;                                            /* 13 */
    color: #6b7280;                                             /* 中灰 */
    text-align: center;                                         /* 居中 */
}

/* 副标里 "TrueX" 品牌色 */
.lv9-brand-hl {
    color: #f97316;                                             /* 橙 */
    font-weight: 600;                                           /* 半粗 */
}

/* 错误提示带 */
.lv9-error {
    background: #fef2f2;                                        /* 浅红底 */
    color: #b91c1c;                                             /* 深红字 */
    padding: 10px 12px;                                         /* 内边距 */
    border-radius: 8px;                                         /* 圆角 */
    font-size: 13px;                                            /* 13 */
    margin-bottom: 16px;                                        /* 间距 */
    border: 1px solid #fecaca;                                  /* 浅红边 */
}

/* 字段组 */
.lv9-field {
    margin-bottom: 16px;                                        /* 字段间距 */
}

/* 字段 label */
.lv9-label {
    display: block;                                             /* 块级 */
    font-size: 14px;                                            /* 14 */
    color: #1f2937;                                             /* 深灰 */
    font-weight: 600;                                           /* 半粗 */
    margin-bottom: 8px;                                         /* 与 input 间距 */
}

/* input 包装器 */
.lv9-input-wrap {
    position: relative;                                         /* 内部 absolute 参照 */
    display: flex;                                              /* flex 让 input 自适应 */
    align-items: center;                                        /* 垂直居中 */
}

/* input 本体 */
.lv9-input {
    width: 100%;                                                /* 占满 */
    height: 44px;                                               /* 44 */
    padding: 0 14px 0 42px;                                     /* 左 42 给图标 */
    border: 1px solid #e5e7eb;                                  /* 浅灰边 */
    border-radius: 8px;                                         /* 圆角 */
    background: #fafafa;                                        /* 极浅灰底 */
    font-size: 14px;                                            /* 14 */
    color: #111827;                                             /* 输入文字深 */
    outline: none;                                              /* 去 outline */
    box-sizing: border-box;                                     /* padding 计入 */
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    font-family: inherit;                                       /* 继承字体 */
}
.lv9-input::placeholder {
    color: #9ca3af;                                             /* 中灰 */
}
.lv9-input:focus {
    border-color: #f97316;                                      /* 橙边 */
    background: #ffffff;                                        /* 聚焦白底 */
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);             /* 橙发光 */
}
/* 密码框右边眼睛留位 */
.lv9-input[type="password"], .lv9-field:has(.lv9-eye) .lv9-input {
    padding-right: 44px;                                        /* 右侧给眼睛 */
}

/* 左图标 */
.lv9-icon-left {
    position: absolute;                                         /* 绝对 */
    left: 12px;                                                 /* 左 12 */
    top: 50%;                                                   /* 垂直中线 */
    transform: translateY(-50%);                                /* 居中 */
    width: 20px;                                                /* 宽 */
    height: 20px;                                               /* 高 */
    color: #9ca3af;                                             /* 灰 */
    pointer-events: none;                                       /* 不拦截 */
}

/* 右图标按钮：眼睛 */
.lv9-icon-right {
    position: absolute;                                         /* 绝对 */
    right: 8px;                                                 /* 右 8 */
    top: 50%;                                                   /* 垂直中线 */
    transform: translateY(-50%);                                /* 居中 */
    width: 28px;                                                /* 宽 */
    height: 28px;                                               /* 高 */
    border: 0;                                                  /* 去边 */
    background: transparent;                                    /* 透明 */
    color: #9ca3af;                                             /* 灰 */
    cursor: pointer;                                            /* 手指 */
    padding: 4px;                                               /* 内边 */
    display: flex;                                              /* 居中 SVG */
    align-items: center;
    justify-content: center;
    border-radius: 6px;                                         /* 微圆 */
    transition: color 0.15s, background 0.15s;
}
.lv9-icon-right:hover {
    color: #f97316;                                             /* hover 橙 */
    background: rgba(249, 115, 22, 0.08);                       /* hover 浅橙底 */
}
.lv9-icon-right svg {
    width: 18px;                                                /* SVG 大小 */
    height: 18px;
}

/* 行：记住账号 + 忘记密码 */
.lv9-row {
    display: flex;                                              /* 两端 */
    justify-content: space-between;                             /* 左右 */
    align-items: center;                                        /* 垂直居中 */
    margin: 4px 0 20px;                                         /* 上 4 / 下 20 */
    font-size: 13px;                                            /* 13 */
}

/* 记住账号 label */
.lv9-remember {
    display: inline-flex;                                       /* inline flex */
    align-items: center;                                        /* 垂直居中 */
    cursor: pointer;                                            /* 手指 */
    user-select: none;                                          /* 防选中 */
    font-size: 13px;                                            /* 13 */
    color: #4b5563;                                             /* 中灰 */
}

/* 真 checkbox 视觉隐藏 */
.lv9-cb-native {
    position: absolute;                                         /* 脱流 */
    opacity: 0;                                                 /* 隐藏 */
    pointer-events: none;                                       /* 不响应 */
}

/* 自定义 checkbox 视觉框 */
.lv9-cb-visual {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
    border: 1.5px solid #d1d5db;                                /* 灰边 */
    border-radius: 4px;                                         /* 微圆 */
    margin-right: 8px;                                          /* 与文字间距 */
    display: inline-flex;                                       /* inline flex */
    align-items: center;                                        /* 居中 */
    justify-content: center;
    position: relative;                                         /* 对勾 absolute 参照 */
    background: #ffffff;                                        /* 白底 */
    transition: border-color 0.15s, background 0.15s;
}

/* checkbox 勾上 */
.lv9-cb-native:checked + .lv9-cb-visual {
    background: #f97316;                                        /* 橙底 */
    border-color: #f97316;                                      /* 橙边 */
}

/* 对勾 */
.lv9-cb-native:checked + .lv9-cb-visual::after {
    content: "";                                                /* 触发 */
    width: 5px;                                                 /* 勾宽 */
    height: 9px;                                                /* 勾高 */
    border-right: 2px solid #ffffff;                            /* 右 */
    border-bottom: 2px solid #ffffff;                           /* 下 */
    transform: rotate(45deg) translate(-1px, -1px);             /* 旋转成勾 */
}

/* 忘记密码 */
.lv9-forgot {
    color: #f97316;                                             /* 橙 */
    font-size: 13px;                                            /* 13 */
    text-decoration: none;                                      /* 去下划线 */
    cursor: pointer;                                            /* 手指 */
    transition: opacity 0.15s;
}
.lv9-forgot:hover {
    opacity: 0.8;                                               /* hover 淡出 */
    text-decoration: underline;                                 /* hover 下划线 */
}

/* ===== 主按钮：进入系统 ===== */
.lv9-btn-primary {
    width: 100%;                                                /* 占满 */
    height: 46px;                                               /* 46 */
    border: 0;                                                  /* 去边 */
    border-radius: 8px;                                         /* 圆角 */
    background: linear-gradient(180deg, #fb923c 0%, #f97316 100%);  /* 橙渐变 */
    color: #ffffff;                                             /* 白字 */
    font-size: 15px;                                            /* 15 */
    font-weight: 600;                                           /* 半粗 */
    cursor: pointer;                                            /* 手指 */
    display: flex;                                              /* 居中 */
    align-items: center;
    justify-content: center;
    gap: 10px;                                                  /* 文字与箭头间距 */
    letter-spacing: 2px;                                        /* 字距 */
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.32);            /* 橙光晕 */
    transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
    font-family: inherit;                                       /* 继承字体 */
}
.lv9-btn-primary:hover {
    filter: brightness(1.05);                                   /* 略亮 */
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.42);            /* 阴影加深 */
}
.lv9-btn-primary:active {
    transform: translateY(1px);                                 /* 按下 */
}

/* 按钮箭头 */
.lv9-btn-arrow {
    width: 18px;                                                /* 宽 */
    height: 18px;                                               /* 高 */
    color: #ffffff;                                             /* 白 */
}

/* "或" 分隔行 */
.lv9-divider {
    display: flex;                                              /* flex */
    align-items: center;                                        /* 居中 */
    margin: 16px 0;                                             /* 上下 16 */
    color: #9ca3af;                                             /* 灰 */
    font-size: 12px;                                            /* 12 */
}
.lv9-divider::before, .lv9-divider::after {
    content: "";                                                /* 触发伪元素 */
    flex: 1;                                                    /* 撑两端 */
    height: 1px;                                                /* 线高 */
    background: #e5e7eb;                                        /* 浅灰 */
}
.lv9-divider span {
    padding: 0 14px;                                            /* 文字左右间距 */
}

/* ===== 次按钮：使用验证码登录 ===== */
.lv9-btn-secondary {
    width: 100%;                                                /* 占满 */
    height: 44px;                                               /* 44 */
    border: 1px solid #fed7aa;                                  /* 浅橙边 */
    border-radius: 8px;                                         /* 圆角 */
    background: #ffffff;                                        /* 白底 */
    color: #f97316;                                             /* 橙字 */
    font-size: 14px;                                            /* 14 */
    font-weight: 600;                                           /* 半粗 */
    cursor: pointer;                                            /* 手指 */
    display: flex;                                              /* 居中 */
    align-items: center;
    justify-content: center;
    gap: 8px;                                                   /* 图标与文字间距 */
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;                                       /* 继承字体 */
}
.lv9-btn-secondary:hover {
    background: #fff7ed;                                        /* hover 浅橙底 */
    border-color: #fb923c;                                      /* hover 边深 */
}

/* 次按钮图标 */
.lv9-btn-icon {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
}

/* ===== 响应式 ===== */

/* 平板 / 中尺寸 */
@media (max-width: 1024px) {
    .lv9-topbar { padding: 0 20px; }                            /* 顶栏 padding 收 */
    .lv9-nav-link { padding: 6px 10px; font-size: 13px; }       /* 链接字号缩 */
    .lv9-card { right: clamp(20px, 4vw, 60px); }                /* 卡更靠右 */
}

/* 窄屏：卡居中铺开 */
@media (max-width: 768px) {
    .lv9-card {
        right: auto;                                            /* 取消右贴 */
        left: 50%;                                              /* 水平中 */
        transform: translate(-50%, -50%);                       /* 居中校正 */
        width: calc(100% - 32px);                               /* 占满除 32 */
        max-width: 400px;                                       /* 最宽 400 */
        padding: 28px 24px 22px;                                /* padding 略缩 */
    }
    .lv9-card-title { font-size: 22px; letter-spacing: 1px; }   /* 标题略缩 */
    .lv9-card-subtitle { margin: 6px 0 20px; }
    .lv9-topbar { padding: 0 14px; height: 56px; }              /* 顶栏紧 */
    .lv9-brand-name { font-size: 16px; }                        /* 品牌名缩 */
    .lv9-brand-icon { width: 24px; height: 24px; }              /* 图标缩 */
    .lv9-brand-sub { font-size: 11px; padding: 1px 6px; }       /* 副标缩 */
    .lv9-nav-link span { display: none; }                       /* 隐藏文字 */
    .lv9-nav-link { padding: 8px; }                             /* 图标按钮 padding */
}

/* 手机超窄：背景偏左让书法可见（design 版右半是 cream，无需为卡腾出右半） */
@media (max-width: 480px) {
    .lv9-bg { object-position: 30% 50%; }                       /* 偏左让书法可见 */
    .lv9-card { padding: 22px 18px 18px; }                      /* padding 紧 */
    .lv9-card-title { font-size: 20px; }                        /* 标题缩 */
    .lv9-input { height: 40px; font-size: 13px; }               /* 输入框缩 */
    .lv9-btn-primary { height: 42px; font-size: 14px; }         /* 主按钮缩 */
    .lv9-btn-secondary { height: 40px; font-size: 13px; }       /* 次按钮缩 */
}

/* lv9 命名空间结束 ========================================================== */


/* ==========================================================================
   lv10 命名空间 (2026-05-25 改首页 ui08 - 第 8 轮)
   核心改动：用老爷给的 GPT 完整背景图替换 lv9 的 design fade-to-cream 版
   新背景图特点：
     - 1672×941 完整连续风景（柠檬树 + 湖 + 远山 + 暖黄日落天空）
     - 无任何文字 / logo / 标语 / 特性卡（纯风景）→ 所有文案必须 HTML 渲染
   结构延续 lv8/lv9 思路：bg / decor / topbar / card 四层 fixed，整页全风景
     - .lv10-bg     : 引用 lv10/bg_v1.png，object-fit:cover 铺满整页
     - .lv10-decor  : 左侧装饰文字层（书法 + 主副标语 + 特性卡）
     - .lv10-topbar : 顶栏（X logo + 三导航按钮）
     - .lv10-card   : 登录卡（白底半透明 + 阴影），浮在风景右侧
   ========================================================================== */

/* body 基础：兜底色用暖米黄（万一 bg 加载前露出，颜色相近不刺眼） */
.lv10-body {
    margin: 0;                                                  /* 去掉默认 margin */
    padding: 0;                                                 /* 去掉默认 padding */
    min-height: 100vh;                                          /* 至少铺满视口高 */
    background: #F7EFE1;                                        /* 暖米黄兜底色，与新 bg 整体色调相近 */
    overflow: hidden;                                           /* 禁止 body 滚动 */
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: #1f2937;                                             /* 默认文字色 */
    -webkit-font-smoothing: antialiased;                        /* 字体抗锯齿 */
    -moz-osx-font-smoothing: grayscale;                         /* Firefox 抗锯齿 */
}

/* 背景层：完整风景图 cover 铺满 viewport */
.lv10-bg {
    position: fixed;                                            /* 脱流，相对 viewport */
    inset: 0;                                                   /* 上下左右贴 viewport */
    width: 100vw;                                               /* 占满视口宽 */
    height: 100vh;                                              /* 占满视口高 */
    object-fit: cover;                                          /* 等比覆盖，超出裁切 */
    object-position: 50% 50%;                                   /* 中心对齐 */
    z-index: 0;                                                 /* 最底层 */
    user-select: none;                                          /* 禁选 */
    pointer-events: none;                                       /* 不拦截鼠标事件 */
    display: block;                                             /* 去 inline 默认间隙 */
}

/* ===== 左侧装饰文字层（v4：屏宽 38% 锚定居中，不管 viewport 怎么变都同位）=====
   设计原则：装饰区中心永远在屏宽 38% 处，logo 居中于此，其他元素左对齐
   left:38% + translate(-50%,-50%) 让装饰区自身中心点锚定到 38% */
.lv10-decor {
    position: fixed;                                            /* 脱流 */
    top: 50%;                                                   /* 垂直居中 */
    left: 38%;                                                  /* 水平：装饰区中心锚定屏宽 38% */
    transform: translate(-50%, -50%);                           /* 居中校正 */
    z-index: 1;                                                 /* 在 bg 上 */
    width: clamp(480px, 46vw, 980px);                           /* 装饰区宽 = logo 宽（max 调到 980 让超宽屏也舒展） */
    max-width: 50vw;                                            /* 安全上限，防小屏撑爆 */
    pointer-events: none;                                       /* 不拦截事件 */
    user-select: none;                                          /* 防选中 */
    display: flex;                                              /* 列布局 */
    flex-direction: column;                                     /* 纵向 */
    align-items: flex-start;                                    /* 元素左对齐于装饰区 */
}

/* ===== 装饰素材图（原始设计稿透明 PNG，直接叠加，不再 CSS 复刻）=====
   重排版：克制比例 + 通透留白 + 大方间距 */

/* 通用装饰图：display:block 去 inline 间隙
   lv10l：删除 crisp-edges（这个属性对文字 PNG 反而模糊，是 lv10k "还是糊"的元凶之一）
   只保留 -webkit-optimize-contrast：chrome 把它当 "high quality" 处理，对文字 PNG 是正确选择 */
.lv10-decor-img {
    display: block;                                             /* 块级 */
    height: auto;                                               /* 等比缩放 */
    user-select: none;                                          /* 防选中 */
    -webkit-user-drag: none;                                    /* 防拖动 */
    image-rendering: -webkit-optimize-contrast;                 /* chrome 唯一对文字友好的高质量插值 */
}

/* 书法字 logo（900×250 透明 PNG）—— 撑满装饰区宽（让 logo 中心 = 装饰区中心 = 38% 屏宽） */
.lv10-decor-calligraphy {
    width: 100%;                                                /* 与装饰区同宽 */
    margin-bottom: 34px;                                        /* 与主标语 */
}

/* 主标语 "不忘初心，勇于为先" 楷书版（lv10/slogan_kai.png 原图 525×70）
   max-width 限到原图宽以下，防放大模糊 */
.lv10-decor-slogan {
    width: 62%;                                                 /* 装饰区 62% */
    max-width: 525px;                                           /* 原图宽，超过会模糊 */
    margin-bottom: 14px;                                        /* 与副标紧凑（楷书行距已包含） */
}

/* 副标语双行 楷书版（lv10/subline_kai.png 原图 525×115）
   max-width 限到原图宽以下 */
.lv10-decor-subline {
    width: 62%;                                                 /* 与主标对齐 */
    max-width: 525px;                                           /* 原图宽 */
    margin-bottom: 44px;                                        /* 与特性栏间距 */
}

/* ===== 特性栏 row：3 个独立 chip 横排 ===== */
.lv10-features-row {
    display: flex;                                              /* 横排 */
    align-items: stretch;                                       /* 三 chip 等高 */
    gap: 14px;                                                  /* chip 间距 */
    flex-wrap: wrap;                                            /* 窄屏可换行 */
}

/* 单个特性 chip：精致版（圆角小一档、padding 收窄、阴影变轻） */
.lv10-feature-chip {
    display: inline-flex;                                       /* flex 让 img 自然居中 */
    align-items: center;                                        /* 垂直居中 */
    justify-content: center;                                    /* 水平居中 */
    background: rgba(255, 255, 255, 0.68);                      /* 半透白底（毛玻璃强度保持） */
    backdrop-filter: blur(18px) saturate(1.3);                  /* 毛玻璃保持 */
    -webkit-backdrop-filter: blur(18px) saturate(1.3);          /* Safari */
    border: 1px solid rgba(255, 255, 255, 0.78);                /* 半透白边 */
    border-radius: 13px;                                        /* 圆角收一档更精致 */
    padding: 14px 20px;                                         /* 内边距收窄让 chip 不臃肿 */
    box-shadow: 0 6px 18px rgba(120, 80, 30, 0.11),             /* 阴影变轻，不再厚重 */
                0 1px 3px rgba(120, 80, 30, 0.07);              /* 细描边阴影 */
    transition: transform 0.18s ease, box-shadow 0.18s ease;    /* hover 动画 */
}

/* chip 内的特性 PNG：回缩到适中，文字仍清晰但不臃肿 */
.lv10-feature-chip-img {
    display: block;                                             /* 块级 */
    height: clamp(58px, 5.5vh, 80px);                           /* 回缩 ~20%，精致协调 */
    width: auto;                                                /* 宽自适应 */
    user-select: none;                                          /* 防选中 */
    -webkit-user-drag: none;                                    /* 防拖动 */
}

/* ===== 顶部导航浮层 ===== */
.lv10-topbar {
    position: fixed;                                            /* 脱流 */
    top: 0;                                                     /* 贴顶 */
    left: 0;                                                    /* 贴左 */
    right: 0;                                                   /* 贴右 */
    height: 64px;                                               /* 固定高 64 */
    /* 半透明渐变白底，盖住背景顶部 */
    background: linear-gradient(180deg, rgba(255,247,232,0.94) 0%, rgba(255,247,232,0.82) 60%, rgba(255,247,232,0) 100%);
    backdrop-filter: blur(10px) saturate(1.2);                  /* 毛玻璃 */
    -webkit-backdrop-filter: blur(10px) saturate(1.2);          /* Safari */
    z-index: 10;                                                /* 在 bg/decor 之上、card 之下 */
    display: flex;                                              /* 横排两端布局 */
    align-items: center;                                        /* 垂直居中 */
    justify-content: space-between;                             /* 品牌靠左、导航靠右 */
    padding: 0 32px;                                            /* 左右内边距 */
    box-sizing: border-box;                                     /* padding 计入宽 */
}

/* 顶栏左侧品牌区 */
.lv10-brand {
    display: flex;                                              /* 横排 */
    align-items: center;                                        /* 垂直居中 */
    gap: 10px;                                                  /* 间距 */
    font-weight: 700;                                           /* 加粗 */
    color: #1f2937;                                             /* 深灰 */
    user-select: none;                                          /* 防选中 */
}

/* 品牌图标 X */
.lv10-brand-icon {
    width: 28px;                                                /* 宽 */
    height: 28px;                                               /* 高 */
    color: #f97316;                                             /* 橙 */
    flex-shrink: 0;                                             /* 不被挤压 */
}

/* 品牌名 */
.lv10-brand-name {
    font-size: 18px;                                            /* 18 */
    letter-spacing: 0.5px;                                      /* 微字距 */
}

/* 品牌副标 "质佳" */
.lv10-brand-sub {
    font-size: 12px;                                            /* 12 */
    color: #f97316;                                             /* 橙 */
    font-weight: 600;                                           /* 半粗 */
    padding: 2px 8px;                                           /* 内边距 */
    border: 1px solid #fed7aa;                                  /* 浅橙边 */
    border-radius: 4px;                                         /* 微圆角 */
    background: rgba(255, 247, 237, 0.7);                       /* 极浅橙底 */
    margin-left: 2px;                                           /* 与名间距 */
}

/* 顶栏右侧导航链接组 */
.lv10-nav-links {
    display: flex;                                              /* 横排 */
    align-items: center;                                        /* 垂直居中 */
    gap: 4px;                                                   /* 链接间距 */
}

/* 单个导航链接 */
.lv10-nav-link {
    background: transparent;                                    /* 透明底 */
    border: 0;                                                  /* 去 button 默认边 */
    cursor: pointer;                                            /* 手指 */
    padding: 8px 14px;                                          /* 内边距 */
    font-size: 14px;                                            /* 14 */
    color: #1f2937;                                             /* 深灰 */
    display: inline-flex;                                       /* 横排 */
    align-items: center;                                        /* 垂直居中 */
    gap: 6px;                                                   /* 图标与文字间距 */
    border-radius: 8px;                                         /* 圆角 */
    transition: background 0.15s, color 0.15s;                  /* hover 过渡 */
    font-family: inherit;                                       /* 继承字体 */
}
.lv10-nav-link:hover {
    background: rgba(249, 115, 22, 0.08);                       /* hover 浅橙底 */
    color: #f97316;                                             /* hover 橙字 */
}

/* 导航链接 SVG 图标 */
.lv10-nav-link svg {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
    color: #f97316;                                             /* 橙 */
    flex-shrink: 0;                                             /* 不被挤压 */
}

/* ===== 登录卡：右侧浮动，固定 px 尺寸 =====
   lv10 调整：背景是完整风景（非 cream 纯色），卡阴影要更深更柔，
   且白底略加 backdrop-filter 让卡和风景融合更自然 */
.lv10-card {
    position: fixed;                                            /* 脱流，相对 viewport */
    top: calc(50% + 32px);                                      /* 中心下偏 32 避开 topbar */
    right: clamp(40px, 6vw, 120px);                             /* 右侧偏移 */
    transform: translateY(-50%);                                /* 垂直居中校正 */
    width: clamp(340px, 28vw, 440px);                           /* 宽 340~440 */
    max-height: calc(100vh - 96px);                             /* 限高 */
    overflow-y: auto;                                           /* 矮屏可滚动 */
    background: rgba(255, 255, 255, 0.96);                      /* 近白半透（透一点点风景质感） */
    backdrop-filter: blur(6px) saturate(1.1);                   /* 毛玻璃增强可读性 */
    -webkit-backdrop-filter: blur(6px) saturate(1.1);           /* Safari */
    border-radius: 14px;                                        /* 圆角 */
    /* 阴影：风景上的卡需要更深的投影才能"浮起来" */
    box-shadow: 0 24px 64px rgba(40, 30, 10, 0.28),             /* 主投影偏暖色 */
                0 2px 8px rgba(40, 30, 10, 0.10);               /* 近距细阴影增强立体 */
    padding: 36px 36px 28px;                                    /* 内 padding */
    box-sizing: border-box;                                     /* padding 计入宽 */
    display: flex;                                              /* 列布局 */
    flex-direction: column;                                     /* 纵向 */
    z-index: 20;                                                /* 顶层 */
    scrollbar-width: thin;                                      /* Firefox 细滚动条 */
    scrollbar-color: #fed7aa transparent;                       /* Firefox 橙色滚动条 */
}
/* webkit 滚动条美化 */
.lv10-card::-webkit-scrollbar { width: 6px; }
.lv10-card::-webkit-scrollbar-track { background: transparent; }
.lv10-card::-webkit-scrollbar-thumb { background: #fed7aa; border-radius: 3px; }
.lv10-card::-webkit-scrollbar-thumb:hover { background: #fb923c; }

/* 卡标题 */
.lv10-card-title {
    margin: 0;                                                  /* 去默认 margin */
    font-size: 26px;                                            /* 26 */
    font-weight: 700;                                           /* 加粗 */
    color: #111827;                                             /* 近黑 */
    text-align: center;                                         /* 居中 */
    letter-spacing: 2px;                                        /* 字距 */
}

/* 卡副标题 */
.lv10-card-subtitle {
    margin: 8px 0 26px;                                         /* 上 8 / 下 26 */
    font-size: 13px;                                            /* 13 */
    color: #6b7280;                                             /* 中灰 */
    text-align: center;                                         /* 居中 */
}

/* 副标里 "TrueX" 品牌色 */
.lv10-brand-hl {
    color: #f97316;                                             /* 橙 */
    font-weight: 600;                                           /* 半粗 */
}

/* 错误提示带 */
.lv10-error {
    background: #fef2f2;                                        /* 浅红底 */
    color: #b91c1c;                                             /* 深红字 */
    padding: 10px 12px;                                         /* 内边距 */
    border-radius: 8px;                                         /* 圆角 */
    font-size: 13px;                                            /* 13 */
    margin-bottom: 16px;                                        /* 间距 */
    border: 1px solid #fecaca;                                  /* 浅红边 */
}

/* 字段组 */
.lv10-field {
    margin-bottom: 16px;                                        /* 字段间距 */
}

/* 字段 label */
.lv10-label {
    display: block;                                             /* 块级 */
    font-size: 14px;                                            /* 14 */
    color: #1f2937;                                             /* 深灰 */
    font-weight: 600;                                           /* 半粗 */
    margin-bottom: 8px;                                         /* 与 input 间距 */
}

/* input 包装器 */
.lv10-input-wrap {
    position: relative;                                         /* 内部 absolute 参照 */
    display: flex;                                              /* flex 让 input 自适应 */
    align-items: center;                                        /* 垂直居中 */
}

/* input 本体 */
.lv10-input {
    width: 100%;                                                /* 占满 */
    height: 44px;                                               /* 44 */
    padding: 0 14px 0 42px;                                     /* 左 42 给图标 */
    border: 1px solid #e5e7eb;                                  /* 浅灰边 */
    border-radius: 8px;                                         /* 圆角 */
    background: #fafafa;                                        /* 极浅灰底 */
    font-size: 14px;                                            /* 14 */
    color: #111827;                                             /* 输入文字深 */
    outline: none;                                              /* 去 outline */
    box-sizing: border-box;                                     /* padding 计入 */
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    font-family: inherit;                                       /* 继承字体 */
}
.lv10-input::placeholder {
    color: #9ca3af;                                             /* 中灰 */
}
.lv10-input:focus {
    border-color: #f97316;                                      /* 橙边 */
    background: #ffffff;                                        /* 聚焦白底 */
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);             /* 橙发光 */
}
/* 密码框右边眼睛留位 */
.lv10-input[type="password"], .lv10-field:has(.lv10-eye) .lv10-input {
    padding-right: 44px;                                        /* 右侧给眼睛 */
}

/* 左图标 */
.lv10-icon-left {
    position: absolute;                                         /* 绝对 */
    left: 12px;                                                 /* 左 12 */
    top: 50%;                                                   /* 垂直中线 */
    transform: translateY(-50%);                                /* 居中 */
    width: 20px;                                                /* 宽 */
    height: 20px;                                               /* 高 */
    color: #9ca3af;                                             /* 灰 */
    pointer-events: none;                                       /* 不拦截 */
}

/* 右图标按钮：眼睛 */
.lv10-icon-right {
    position: absolute;                                         /* 绝对 */
    right: 8px;                                                 /* 右 8 */
    top: 50%;                                                   /* 垂直中线 */
    transform: translateY(-50%);                                /* 居中 */
    width: 28px;                                                /* 宽 */
    height: 28px;                                               /* 高 */
    border: 0;                                                  /* 去边 */
    background: transparent;                                    /* 透明 */
    color: #9ca3af;                                             /* 灰 */
    cursor: pointer;                                            /* 手指 */
    padding: 4px;                                               /* 内边 */
    display: flex;                                              /* 居中 SVG */
    align-items: center;
    justify-content: center;
    border-radius: 6px;                                         /* 微圆 */
    transition: color 0.15s, background 0.15s;
}
.lv10-icon-right:hover {
    color: #f97316;                                             /* hover 橙 */
    background: rgba(249, 115, 22, 0.08);                       /* hover 浅橙底 */
}
.lv10-icon-right svg {
    width: 18px;                                                /* SVG 大小 */
    height: 18px;
}

/* 行：记住账号 + 忘记密码 */
.lv10-row {
    display: flex;                                              /* 两端 */
    justify-content: space-between;                             /* 左右 */
    align-items: center;                                        /* 垂直居中 */
    margin: 4px 0 20px;                                         /* 上 4 / 下 20 */
    font-size: 13px;                                            /* 13 */
}

/* 记住账号 label */
.lv10-remember {
    display: inline-flex;                                       /* inline flex */
    align-items: center;                                        /* 垂直居中 */
    cursor: pointer;                                            /* 手指 */
    user-select: none;                                          /* 防选中 */
    font-size: 13px;                                            /* 13 */
    color: #4b5563;                                             /* 中灰 */
}

/* 真 checkbox 视觉隐藏 */
.lv10-cb-native {
    position: absolute;                                         /* 脱流 */
    opacity: 0;                                                 /* 隐藏 */
    pointer-events: none;                                       /* 不响应 */
}

/* 自定义 checkbox 视觉框 */
.lv10-cb-visual {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
    border: 1.5px solid #d1d5db;                                /* 灰边 */
    border-radius: 4px;                                         /* 微圆 */
    margin-right: 8px;                                          /* 与文字间距 */
    display: inline-flex;                                       /* inline flex */
    align-items: center;                                        /* 居中 */
    justify-content: center;
    position: relative;                                         /* 对勾 absolute 参照 */
    background: #ffffff;                                        /* 白底 */
    transition: border-color 0.15s, background 0.15s;
}

/* checkbox 勾上 */
.lv10-cb-native:checked + .lv10-cb-visual {
    background: #f97316;                                        /* 橙底 */
    border-color: #f97316;                                      /* 橙边 */
}

/* 对勾 */
.lv10-cb-native:checked + .lv10-cb-visual::after {
    content: "";                                                /* 触发 */
    width: 5px;                                                 /* 勾宽 */
    height: 9px;                                                /* 勾高 */
    border-right: 2px solid #ffffff;                            /* 右 */
    border-bottom: 2px solid #ffffff;                           /* 下 */
    transform: rotate(45deg) translate(-1px, -1px);             /* 旋转成勾 */
}

/* 忘记密码 */
.lv10-forgot {
    color: #f97316;                                             /* 橙 */
    font-size: 13px;                                            /* 13 */
    text-decoration: none;                                      /* 去下划线 */
    cursor: pointer;                                            /* 手指 */
    transition: opacity 0.15s;
}
.lv10-forgot:hover {
    opacity: 0.8;                                               /* hover 淡出 */
    text-decoration: underline;                                 /* hover 下划线 */
}

/* ===== 主按钮：进入系统 ===== */
.lv10-btn-primary {
    width: 100%;                                                /* 占满 */
    height: 46px;                                               /* 46 */
    border: 0;                                                  /* 去边 */
    border-radius: 8px;                                         /* 圆角 */
    background: linear-gradient(180deg, #fb923c 0%, #f97316 100%);  /* 橙渐变 */
    color: #ffffff;                                             /* 白字 */
    font-size: 15px;                                            /* 15 */
    font-weight: 600;                                           /* 半粗 */
    cursor: pointer;                                            /* 手指 */
    display: flex;                                              /* 居中 */
    align-items: center;
    justify-content: center;
    gap: 10px;                                                  /* 文字与箭头间距 */
    letter-spacing: 2px;                                        /* 字距 */
    box-shadow: 0 6px 16px rgba(249, 115, 22, 0.32);            /* 橙光晕 */
    transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
    font-family: inherit;                                       /* 继承字体 */
}
.lv10-btn-primary:hover {
    filter: brightness(1.05);                                   /* 略亮 */
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.42);            /* 阴影加深 */
}
.lv10-btn-primary:active {
    transform: translateY(1px);                                 /* 按下 */
}

/* 按钮箭头 */
.lv10-btn-arrow {
    width: 18px;                                                /* 宽 */
    height: 18px;                                               /* 高 */
    color: #ffffff;                                             /* 白 */
}

/* "或" 分隔行 */
.lv10-divider {
    display: flex;                                              /* flex */
    align-items: center;                                        /* 居中 */
    margin: 16px 0;                                             /* 上下 16 */
    color: #9ca3af;                                             /* 灰 */
    font-size: 12px;                                            /* 12 */
}
.lv10-divider::before, .lv10-divider::after {
    content: "";                                                /* 触发伪元素 */
    flex: 1;                                                    /* 撑两端 */
    height: 1px;                                                /* 线高 */
    background: #e5e7eb;                                        /* 浅灰 */
}
.lv10-divider span {
    padding: 0 14px;                                            /* 文字左右间距 */
}

/* ===== 次按钮：使用验证码登录 ===== */
.lv10-btn-secondary {
    width: 100%;                                                /* 占满 */
    height: 44px;                                               /* 44 */
    border: 1px solid #fed7aa;                                  /* 浅橙边 */
    border-radius: 8px;                                         /* 圆角 */
    background: #ffffff;                                        /* 白底 */
    color: #f97316;                                             /* 橙字 */
    font-size: 14px;                                            /* 14 */
    font-weight: 600;                                           /* 半粗 */
    cursor: pointer;                                            /* 手指 */
    display: flex;                                              /* 居中 */
    align-items: center;
    justify-content: center;
    gap: 8px;                                                   /* 图标与文字间距 */
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;                                       /* 继承字体 */
}
.lv10-btn-secondary:hover {
    background: #fff7ed;                                        /* hover 浅橙底 */
    border-color: #fb923c;                                      /* hover 边深 */
}

/* 次按钮图标 */
.lv10-btn-icon {
    width: 16px;                                                /* 宽 */
    height: 16px;                                               /* 高 */
}

/* ===== 响应式 ===== */

/* 平板 / 中尺寸：装饰文字略缩，卡更靠右 */
@media (max-width: 1200px) {
    .lv10-decor { max-width: clamp(380px, 45vw, 560px); }       /* 装饰宽收缩 */
}

/* 平板：装饰文字进一步缩，导航字号缩 */
@media (max-width: 1024px) {
    .lv10-topbar { padding: 0 20px; }                           /* 顶栏 padding 收 */
    .lv10-nav-link { padding: 6px 10px; font-size: 13px; }      /* 链接字号缩 */
    .lv10-card { right: clamp(20px, 4vw, 60px); }               /* 卡更靠右 */
    .lv10-decor { left: clamp(20px, 3vw, 50px); max-width: 50vw; }
}

/* 窄屏：装饰文字隐藏，卡居中铺开 */
@media (max-width: 768px) {
    .lv10-decor { display: none; }                              /* 窄屏隐藏装饰文字层 */
    .lv10-card {
        right: auto;                                            /* 取消右贴 */
        left: 50%;                                              /* 水平中 */
        transform: translate(-50%, -50%);                       /* 居中校正 */
        width: calc(100% - 32px);                               /* 占满除 32 */
        max-width: 400px;                                       /* 最宽 400 */
        padding: 28px 24px 22px;                                /* padding 略缩 */
    }
    .lv10-card-title { font-size: 22px; letter-spacing: 1px; }  /* 标题略缩 */
    .lv10-card-subtitle { margin: 6px 0 20px; }
    .lv10-topbar { padding: 0 14px; height: 56px; }             /* 顶栏紧 */
    .lv10-brand-name { font-size: 16px; }                       /* 品牌名缩 */
    .lv10-brand-icon { width: 24px; height: 24px; }             /* 图标缩 */
    .lv10-brand-sub { font-size: 11px; padding: 1px 6px; }      /* 副标缩 */
    .lv10-nav-link span { display: none; }                      /* 隐藏文字 */
    .lv10-nav-link { padding: 8px; }                            /* 图标按钮 padding */
}

/* 手机超窄：卡再紧 */
@media (max-width: 480px) {
    .lv10-bg { object-position: 50% 50%; }                      /* 仍中心对齐（背景是完整风景） */
    .lv10-card { padding: 22px 18px 18px; }                     /* padding 紧 */
    .lv10-card-title { font-size: 20px; }                       /* 标题缩 */
    .lv10-input { height: 40px; font-size: 13px; }              /* 输入框缩 */
    .lv10-btn-primary { height: 42px; font-size: 14px; }        /* 主按钮缩 */
    .lv10-btn-secondary { height: 40px; font-size: 13px; }      /* 次按钮缩 */
}

/* lv10 命名空间结束 ========================================================== */