/* 1. 核心配色协议 */
:root {
    /* --- 基础变量 --- */
    --bg-color: #f2f3f5;        /* 页面整体背景色，用于body等最外层容器 */
    --card-bg: #ffffff;         /* 卡片类组件的背景色，如信息卡片、内容区块等 */
    --text-main: #323233;       /* 主要文本颜色，用于标题、重要信息等需要突出显示的文本 */
    --text-sub: #969799;        /* 次要文本颜色，用于描述性文字、辅助信息等 */
    --border-color: #ebedf0;    /* 边框颜色，用于分割线、组件边框等 */
    --primary-gold: #b89341;    /* 主要强调色，用于重要按钮、高亮元素等 */
    --nav-bg: #ffffff;          /* 导航栏背景色，用于顶部导航、侧边栏等 */
    --unactive-color: #7d7e80;  /* 未激活元素的颜色，用于禁用状态的按钮、不可点击的链接等 */
    /* 以下三种颜色不随主题切换 */
    --active-color: #1989fa;    /* 激活元素的颜色 */
    --color-yang: #ef4444;      /* 阳爻颜色 */
    --color-yin: #3b82f6;       /* 阴爻颜色 */
    /* --- Cell 适配 --- */
    /* Cell 适配 */
    --van-cell-background: var(--card-bg);          /* 单元格背景 */
    --van-cell-text-color: var(--text-main);        /* 单元格文本颜色 */
    --van-cell-label-color: var(--text-sub);        /* 单元格标签颜色 */
    --van-cell-value-color: var(--text-sub);        /* 单元格值颜色 */
    --van-cell-active-color: var(--border-color);   /* 点击时的反馈色 */
    --van-cell-group-background: transparent;       /* 单元格组背景 */
    --van-cell-group-title-color: var(--text-sub);  /* 单元格组标题颜色 */
    --van-cell-group-inset-padding: 0 16px;         /* 单元格组内边距 */
    /* --- Grid 适配 --- */
    --van-grid-item-content-background: var(--card-bg);         /* 关键：网格背景 */
    --van-grid-item-content-active-color: var(--border-color);  /* 点击效果 */
    --van-grid-item-text-color: var(--text-main);               /* 网格文本 */
    --van-grid-item-text-font-size: 13px;                       /* 网格文本大小 */
    --van-grid-item-icon-size: 26px;                            /* 网格图标大小 */
    /* --- ActionSheet 专用变量 --- */
    --van-action-sheet-background: var(--card-bg);              /* 背景颜色 */
    --van-action-sheet-header-height: 48px;                     /* 头部高度 */
    --van-action-sheet-header-font-size: 16px;                  /* 头部字体大小 */
    --van-action-sheet-header-text-color: var(--text-main);     /* 头部文本颜色 */
    --van-action-sheet-close-icon-color: var(--text-sub);       /* 关闭图标颜色 */
    --van-action-sheet-border-radius: 16px;                     /* 顶部圆角 */
    /* Dialog 专用变量 */
    --van-dialog-background: var(--card-bg);                /* 对话框整体背景 */
    --van-dialog-header-text-color: var(--text-main);       /* 标题颜色 */
    --van-dialog-message-text-color: var(--text-sub);       /* 正文颜色 */
    --van-dialog-button-background: var(--card-bg);         /* 底部按钮的背景（重要，防止按钮发白） */
    --van-dialog-button-text-color: var(--text-main);       /* 底部按钮文本颜色 */
    --van-dialog-button-active-color: var(--border-color);  /* 按钮点击效果 */
    /* Button 专用变量 */
    --van-button-background: var(--primary-gold);            /* 按钮背景 */
    --van-button-text-color: #ffffff;                      /* 按钮文本颜色 */
    --van-button-active-color: var(--border-color);          /* 按钮点击效果 */
    /* Tabbar 专用变量 */
    --van-tabbar-background: var(--nav-bg);                  /* 背景颜色 */
    --van-tabbar-item-color: var(--unactive-color);          /* 未激活颜色 */
    --van-tabbar-item-active-color: var(--text-main);        /* 激活颜色 */
    /* Popup (弹出层/抽屉) 专用变量 */
    --van-popup-background-color: var(--card-bg);           /* 弹窗/抽屉整体背景色 */
    --van-popup-title-color: var(--text-main);              /* 标题颜色 (如果有标题) */
    --van-popup-close-icon-color: var(--text-sub);          /* 关闭图标颜色 */
    --van-popup-border-radius: 16px 16px 0 0;               /* 顶部圆角 (适配底部弹出) */
    /* Field (输入框) 适配 - 用于弹窗内的表单 */
    --van-field-background-color: transparent;                    /* 输入框背景透明，继承弹窗背景 */
    --van-field-label-color: var(--text-main);                    /* 输入框左侧标签颜色 */
    --van-field-input-text-color: var(--text-main);               /* 输入文字颜色 */
    --van-field-placeholder-color: var(--text-sub);               /* 占位符颜色 */
    /* Button (按钮) 适配 - 确保弹窗内按钮风格统一 */
    --van-button-primary-background-color: var(--primary-gold);   /* 主要按钮背景 */
    --van-button-primary-text-color: #ffffff;                   /* 主要按钮文字 */
}

[data-theme="dark"] {
    /* 基础颜色、背景等底层变量 */
    --bg-color: #121212;        /* 避免纯黑，减少视觉疲劳 */
    --card-bg: #1e1e20;         /* 比背景色稍亮，形成层次感 */
    --text-main: #f5f5f5;       /* 主要文本保持高对比度 */
    --text-sub: #7a7a7d;        /* 比主要文本暗，符合设计逻辑 */
    --border-color: #3a3a3c;    /* 增强边框可见性 */
    --primary-gold: #e6c040;    /* 提高对比度，确保可读性 */
    --nav-bg: #1a1a1c;          /* 与卡片背景形成层次 */
    --unactive-color: #8a8a8c;  /* 未激活元素应比背景亮，确保可见 */
    /* 基于上面的基础变量，覆盖第三方组件库的默认变量 */
    /* Cell 适配 */
    --van-cell-active-color: var(--border-color);
    --van-cell-group-title-color: var(--text-sub);
    /* Grid 适配 */
    --van-grid-item-content-active-color: var(--border-color);
    /* ActionSheet  (底部弹出层) 专用变量 */
    --van-action-sheet-background: var(--card-bg);
    --van-action-sheet-header-text-color: var(--text-main);
    --van-action-sheet-close-icon-color: var(--text-sub);
    /* Dialog (对话框) */
    --van-dialog-background: var(--card-bg);                /* 对话框整体背景 */
    --van-dialog-header-text-color: var(--text-main);       /* 标题颜色 */
    --van-dialog-message-text-color: var(--text-sub);       /* 正文颜色 */
    --van-dialog-button-background: var(--card-bg);         /* 底部按钮的背景（重要，防止按钮发白） */
    --van-dialog-button-text-color: var(--text-main);       /* 底部按钮文本颜色 */
    --van-dialog-button-active-color: var(--border-color);  /* 按钮点击效果 */
    /* Button 专用变量 */
    --van-button-background: var(--primary-gold);       /* 按钮背景 */
    --van-button-text-color: #ffffff;                 /* 按钮文本颜色 */
    --van-button-active-color: var(--border-color);     /* 按钮点击效果 */
    /* Tabbar 专用变量 */
    --van-tabbar-background: var(--nav-bg);
    --van-tabbar-item-color: var(--unactive-color);
    --van-tabbar-item-active-color: var(--text-main);
    /* Popup (弹出层/抽屉) 专用变量 */
    --van-popup-background-color: var(--card-bg);         /* 弹窗/抽屉整体背景色 */
    --van-popup-title-color: var(--text-main);            /* 标题颜色 (如果有标题) */
    --van-popup-close-icon-color: var(--text-sub);        /* 关闭图标颜色 */
    --van-popup-border-radius: 16px 16px 0 0;             /* 顶部圆角 (适配底部弹出) */
    /* Field (输入框) 适配 - 用于弹窗内的表单 */
    --van-field-background-color: transparent;            /* 输入框背景透明，继承弹窗背景 */
    --van-field-label-color: var(--text-main);            /* 输入框左侧标签颜色 */
    --van-field-input-text-color: var(--text-main);       /* 输入文字颜色 */
    --van-field-placeholder-color: var(--text-sub);       /* 占位符颜色 */
    /* Button (按钮) 适配 - 确保弹窗内按钮风格统一 */
    --van-button-primary-background-color: var(--primary-gold); /* 主要按钮背景 */
    --van-button-primary-text-color: #ffffff;             /* 主要按钮文字 */
    /* 其他组件 */
    --van-border-color: var(--border-color);
}

.van-popup { border-radius: 16px 16px 0 0 !important; box-shadow: 0 -4px 12px rgba(0,0,0,0.1) !important; padding-bottom: env(safe-area-inset-bottom); }
/* Cell 适配深色模式下的分割线 */
[data-theme="dark"] .van-cell:after { border-bottom: 1px solid var(--border-color); }
/* 适配深色模式的边框线 */
[data-theme="dark"] .van-hairline--top:after,
[data-theme="dark"] .van-hairline--left:after,
[data-theme="dark"] .van-hairline--right:after,
[data-theme="dark"] .van-hairline--bottom:after,
[data-theme="dark"] .van-hairline--surround:after { border-color: var(--border-color) !important; }

.van-grid-item__icon, .van-cell__left-icon { color: var(--primary-gold) !important; }   /* 强制设置Cell组件中图标的主题色，确保视觉一致性 */
.van-cell-group__title { padding: 16px 16px 8px; font-weight: bold; color: var(--primary-gold) !important; }    /* 组标题用金色点缀 */

/* 设置导航栏在深色模式下的背景、文字颜色和边框 */
.van-nav-bar, 
.custom-nav-bar { 
    background: var(--nav-bg) !important;
    --van-nav-bar-background: var(--nav-bg) !important;
    --van-nav-bar-title-text-color: var(--text-main) !important;
    --van-nav-bar-icon-color: var(--primary-gold) !important;
    border-bottom: 1px solid var(--border-color);
}

/* 优化右侧按钮的尺寸、交互区域和反馈效果 */
.nav-right-btn {
    font-size: 24px !important;     /* 增大字体，提高可识别性 */
    color: var(--primary-gold);     /* 使用主题色 */
    padding: 8px;                   /* 扩大点击区域 */
    margin-right: -8px;             /* 微调位置，更贴近边缘 */
    cursor: pointer;
    transition: opacity 0.2s;       /* 添加过渡效果 */
}

/* 添加点击反馈，提升交互体验 */
.nav-right-btn:active { opacity: 0.6;}

/* 设置底部标签栏在深色模式下的样式，显式指定未激活颜色 */
.van-tabbar {
    --van-tabbar-background: var(--nav-bg) !important;
    --van-tabbar-item-text-color: var(--unactive-color) !important;
    --van-tabbar-item-icon-color: var(--unactive-color) !important;
    --van-tabbar-item-active-color: var(--primary-gold) !important;
    --van-tabbar-item-active-background: transparent !important;
    border-top: 1px solid var(--border-color);
}

/* 弹窗背景、标题栏和安全区的深色模式样式 */
.van-action-sheet { background: var(--van-action-sheet-background) !important; transition: background 0.3s ease; }
.van-action-sheet__header { background: var(--van-action-sheet-background) !important; color: var(--van-action-sheet-header-text-color) !important; font-weight: 600; }
.van-action-sheet__safe-area-inset-bottom { background: var(--van-action-sheet-background); }   /* 适配底部安全区（iPhone 底部横条） */
.van-action-sheet__description:after { border-color: var(--border-color); } /* 弹窗描述区域的边框 */


/* 2. 基础布局及 Vant 组件重写 */
/* 自动匹配系统主题偏好 */
@media (prefers-color-scheme: dark) {
  /* 当用户系统设置为深色模式且未手动选择主题时，自动应用深色主题 */
  :root {
    --bg-color: #121212;
    --card-bg: #1e1e20;
    --text-main: #f5f5f5;
    --text-sub: #7a7a7d;
    --border-color: #3a3a3c;
    --primary-gold: #e6c040;
    --nav-bg: #1a1a1c;
    --unactive-color: #8a8a8c;
  }
}

body { 
    /* 使用主题变量设置背景和文字颜色，确保与主题配置一致 */
    background: var(--bg-color);        /* 背景颜色 */
    color: var(--text-main);            /* 文字颜色 */
    margin: 0;                          /* 去除默认的外边距 */
    /* 添加更多备用字体，提高跨平台显示一致性 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;                                    /* 字体大小 14px，移动端的标准可读字号 */
    line-height: 1.5;                                   /* 行高 1.5，提高可读性 */
    -webkit-font-smoothing: antialiased;                /* 启用字体抗锯齿，提升文字显示质量 */
    transition: background 0.3s ease, color 0.3s ease;  /* 添加过渡效果，使主题切换更平滑 */
}

/* QD 系列组件 */
.qd-wrapper { width: 100%; box-sizing: border-box; }  /* 整个页面容器 */

/* 导航栏 */
.qd-tabs-wrapper .van-tabs__nav { background: transparent; }   /* 背景透明 */
.qd-tabs-wrapper .van-tab { color: var(--text-sub); transition: all 0.3s ease; }       /* 未选中时的文字*/
.qd-tabs-wrapper .van-tab--active { color: var(--active-color); font-weight: bold; }   /* 选中时的文字 */
.qd-tabs-wrapper .van-tabs__line {     /* 指示条发光 */
  background-color: #ef4444; width: 40px !important; height: 3px !important; border-radius: 2px;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8), 0 0 20px rgba(239, 68, 68, 0.4); /* 发光：添加阴影 */
}

/* 列表显示：介绍 */
.qd-intro-card{ padding: 16px; border-radius: 12px; }
.qd-intro-title { font-size: 18px; font-weight: bold; color: var(--text-main); margin-bottom: 10px; }
.qd-intro-desc { color: var(--text-main); }
.qd-intro-card ul {
    list-style-type: disc !important; /* 显示实心圆点 */
    padding-left: 40px !important;    /* 左侧缩进 */
    margin-top: 1em !important;       /* 上边距 */
    margin-bottom: 1em !important; }
.qd-intro-card li { margin-bottom: 8px; color: var(--text-sub); }
/* 列表显示：内容（配合折叠面板） */
.qd-item-card { padding: 12px 16px; border-top: 1px solid var(--border-color); background-color: var(--card-bg); }
.qd-item-card ul { margin: 0; padding: 0; list-style: none; }
.qd-item-card li { padding: 10px 0; color: var(--text-main); border-bottom: 1px dashed var(--border-color); }
.qd-item-card li:last-child { border-bottom: none; }

/* 折叠面板：左侧标题，右侧旋转箭头 */
.qd-collapse-panel { border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; background-color: var(--bg-color); margin-bottom: 10px; }
.qd-collapse-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background-color: var(--nav-color); cursor: pointer; user-select: none; transition: background-color 0.2s; }
.qd-collapse-panel-header:hover { background-color: var(--active-color); }
.qd-collapse-panel-arrow { font-size: 15px; color: var(--text-main); transition: transform 0.3s ease; transform: rotate(-90deg); }
.qd-collapse-panel-arrow.is-active { transform: rotate(0deg); }
/* Vue transition 配合折叠面板的动画类*/
.collapse-transition-enter-active, .collapse-transition-leave-active { transition: all 0.3s ease; overflow: hidden; }
.collapse-transition-enter-from, .collapse-transition-leave-to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
.collapse-transition-enter-to, .collapse-transition-leave-from { opacity: 1; max-height: 500px; }

.qd-label { font-weight: 600; color: var(--text-main); min-width: 60px; flex-shrink: 0; }

.qd-input-line {
  flex: 1;              /* 使输入框占据剩余空间 */
  border: none;         /* 去除默认边框 */
  border-bottom: 1.5px solid var(--border-color);
  background: transparent;
  color: var(--primary-gold);
  font-weight: bold;
  text-align: center;
  padding: 0;
  font-size: 18px;
  letter-spacing: 2px;      /* 字母间距 */
  font-family: monospace;   /* 使用等宽字体 */
}
.qd-input-line:focus { border-bottom-color: var(--primary-gold); outline: none; }

.qd-btn-primary {           /* 主按钮样式 */
    margin-top: 23px;               /* 按钮与上方元素的间距 */
    width: 100%;                    /* 宽度占满父容器（全宽按钮） */
    height: 46px;                   /* 固定高度 46px，适合手指点击 */
    background: var(--primary-gold);/* 背景色使用 CSS 变量
    color: white;                   /* 文字颜色为白色 */
    border: none;                   /* 去除默认边框 */
    border-radius: 23px;            /* 圆角23，“胶囊”形状 */
    font-weight: bold;              /* 文字加粗，增加视觉权重 */
    font-size: 16px;                /* 字体大小 16px，移动端的标准可读字号 */
    cursor: pointer;                /* 鼠标悬停时显示手指图标 */
    letter-spacing: 2px;            /* 2px字间距，按钮文字更有质感 */
    transition: opacity 0.2s;       /* 让透明度变化有平滑过渡 */
    -webkit-tap-highlight-color: transparent; }/* 去除移动端点击时的高亮闪屏 */
.qd-btn-primary:hover { opacity: 0.8; }     /* 悬浮态：PC端鼠标悬停时稍微变暗 */
.qd-btn-primary:active { opacity: 0.8; }    /* 激活/按下态：手指按下瞬间变暗，提供物理按压反馈 */
.qd-btn-primary:disabled {  /* 禁用态：不可点击，置灰处理 */
    background: var(--text-sub, #969799); cursor: not-allowed; opacity: 0.6; }

.qd-card {                  /* 带边框的卡片 */
    display: flex;                  /* 使用 flex 布局 */
    border-radius: 12px;            /* 圆角边框 */
    padding: 16px;                  /* 内部留白 */
    margin-bottom: 15px;            /* 下边距 */
    background: var(--card-bg);     /* 背景颜色 */
    border: 1px solid var(--border-color);  /* 边框颜色 */
}

/* 文本输入域 */
.qd-textarea-wrapper { position: relative; margin-top: 15px; }
.qd-textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border-color); background-color: var(--bg-color); border-radius: 8px; color: var(--text-main); resize: none; min-height: 60px; font-family: inherit; }
.qd-textarea:focus { outline: none; border-color: var(--primary-gold); }
.qd-textarea::placeholder { color: var(--text-sub); }
.qd-textarea-count { position: absolute; right: 12px; bottom: 8px; font-size: 12px; color: var(--text-sub); pointer-events: none; }

/* 单选图标圆圈or方框 (配合原生 radio 使用) */
.qd-radio-item { display: flex; align-items: center; cursor: pointer; color: var(--text-sub); }
.qd-radio-item input[type="radio"] { display: none; }
.qd-radio-icon { width: 18px; height: 18px; border: 2px solid var(--border-color); margin-right: 6px; transition: all 0.2s; position: relative; display: inline-block; box-sizing: border-box; background-color: #ffffff; }
.qd-radio-icon.is-round { border-radius: 50%; }
.qd-radio-icon.is-square { border-radius: 2px; }
.qd-radio-item input[type="radio"]:checked ~ .qd-radio-icon { border-color: var(--active-color); }
.qd-radio-item input[type="radio"]:checked ~ .qd-radio-label { font-weight: bold; color: var(--primary-gold); }
.qd-radio-icon::after { content: ''; position: absolute; background-color: var(--active-color); transform: translate(-50%, -50%); top: 50%; left: 50%; display: none; }
.qd-radio-icon.is-round::after { width: 8px; height: 8px; border-radius: 50%; }
.qd-radio-icon.is-square::after { width: 8px; height: 8px; border-radius: 1px; }
.qd-radio-item input[type="radio"]:checked ~ .qd-radio-icon::after { display: block; }

/* 单选标签组 (流式布局，隐藏原生圆点) */
.qd-radio-tag-group { display: flex; flex-wrap: wrap; margin-top: 15px; gap: 10px; }
.qd-radio-tag-group input[type="radio"] { display: none; }
.qd-radio-tag-group label {
  padding: 3px 8px; border-radius: 5px; font-size: 13px;
  background-color: var(--bg-color); color: var(--text-sub); transition: all 0.2s; user-select: none; cursor: pointer; }
.qd-radio-tag-group input[type="radio"]:checked + label { background-color: var(--primary-gold); font-weight: bold; color: #ffffff; }

 /* 下拉菜单 */
.qd-select {
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg, #ffffff);
    color: var(--text-main);
    border-radius: 5px; cursor: pointer; }
.qd-select option { background: var(--card-bg, #ffffff); color: var(--van-primary-color, #1989fa); }


/* ----- 以上样式已多处应用 ----- */

select.qd-input-line {
    min-width: 80px;                            /* 设置最小宽度 */
}

.res-mid { font-size: 18px; font-weight: 700; color: var(--primary-gold); }
.res-lg { font-size: 34px; font-weight: 900; color: var(--primary-gold); letter-spacing: -1px; }
.res-hint { font-size: 12px; color: var(--text-sub); }

/* 4. 布局类 */
.flex-center {                  /* 全能居中对齐 */
  display: flex;            /* 使用 flex 布局 */
  align-items: center;      /* 垂直方向上居中对齐 */
  justify-content: center;  /* 水平方向上居中对齐 */
}

.flex-between {                 /* 两端对齐 */
  display: flex;                    /* 使用 flex 布局 */
  align-items: center;              /* 垂直方向上居中对齐 */
  justify-content: space-between;   /* 水平方向上两端对齐 */
}

.flex-baseline {                /* 基线对齐 */
  display: flex;            /* 使用 flex 布局 */
  align-items: baseline;    /* 垂直方向上基线对齐 */
  margin: 8px;              /* 子元素之间留有 8px 的间隙 */ 
}

.flex-baseline-inner {          /* 基线对齐内部容器 */
  display: flex;                    /* 使用 flex 布局 */
  align-items: baseline;            /* 垂直方向上基线对齐 */
  flex: 1;                          /* 占据剩余空间 */
  justify-content: flex-start;      /* 水平方向上左对齐 */
  gap: 4px;                         /* 子元素之间留有 4px 的间隙 */
  color: var(--text-main);          /* 设置文本颜色 */
}

.flex-column {                  /* 内容垂直排列（默认水平） */
    flex-direction: column;
}