/*! 
 * Spectre.css v0.5.9 - 轻量级响应式 CSS 框架
 * MIT License - 开源地址: github.com/picturepan2/spectre
 * 核心定位：简洁、无冗余，适配现代Web开发需求
 */

/* ==============================================
   1. 基础样式重置 (Normalize + 框架基础配置)
   ============================================== */
html {
  font-family: sans-serif; /* 基础无衬线字体，保证跨平台一致性 */
  -webkit-text-size-adjust: 100%; /* 禁止iOS横屏时字体放大 */
  -ms-text-size-adjust: 100%; /* 禁止IE文本大小调整 */
}

body {
  margin: 0; /* 清除默认body边距 */
}

/* HTML5语义化标签兼容处理（适配低版本浏览器） */
article, aside, footer, header, nav, section {
  display: block;
}

/* 标题基础样式重置 */
h1 {
  font-size: 2em;
  margin: .67em 0;
}

/* 媒体/嵌入元素基础样式 */
figcaption, figure, main { display: block; }
hr { box-sizing: content-box; height: 0; overflow: visible; } /* 重置hr默认样式 */
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; } /* 隐藏无控制条的音频 */
img { border-style: none; } /* 清除图片默认边框（适配IE） */
svg:not(:root) { overflow: hidden; } /* SVG溢出隐藏 */

/* 表单元素基础重置（统一跨浏览器样式） */
button, input, optgroup, select, textarea {
  font-family: inherit; /* 继承父级字体，避免表单字体不一致 */
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}
button, input { overflow: visible; } /* 允许按钮/输入框溢出（适配IE） */
button, select { text-transform: none; } /* 禁止按钮默认文本大写（适配iOS） */
/* 按钮外观重置（清除浏览器默认样式） */
[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: button;
}
/* 清除按钮默认内边距（适配Firefox） */
[type=button]::-moz-focus-inner, 
[type=reset]::-moz-focus-inner, 
[type=submit]::-moz-focus-inner, 
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/* 表单字段集/图例重置 */
fieldset { border: 0; margin: 0; padding: 0; }
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress { display: inline-block; vertical-align: baseline; } /* 进度条基础样式 */
textarea { overflow: auto; } /* 文本域默认滚动 */
/* 复选框/单选框样式重置 */
[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0;
}
/* 数字输入框清除默认 spinner（适配Chrome/Safari） */
[type=number]::-webkit-inner-spin-button, 
[type=number]::-webkit-outer-spin-button {
  height: auto;
}
/* 搜索框外观重置（适配Chrome/Safari） */
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type=search]::-webkit-search-cancel-button, 
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/* 文件上传按钮外观重置（适配Chrome/Safari） */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
/* 交互元素基础样式 */
details, menu { display: block; }
summary { display: list-item; outline: 0; } /* 详情列表项样式 */
canvas { display: inline-block; }
template { display: none; }
[hidden] { display: none; } /* 隐藏hidden属性元素 */

/* 全局盒模型：统一使用border-box（避免padding影响宽高） */
*, ::after, ::before {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  font-size: 20px; /* 基础字体大小（1rem = 20px） */
  line-height: 1.5; /* 基础行高，保证可读性 */
  -webkit-tap-highlight-color: transparent; /* 清除移动端点击高亮 */
}

/* ==============================================
   2. 核心文本样式（字体、颜色、标题、段落等）
   ============================================== */
body {
  background: #fff; /* 页面默认背景色 */
  color: #3b4351; /* 基础文本色（深灰，避免纯黑刺眼） */
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* 系统无衬线字体，适配多平台 */
  font-size: .8rem; /* 正文字体大小（16px = 0.8*20px） */
  overflow-x: hidden; /* 禁止水平滚动 */
  text-rendering: optimizeLegibility; /* 优化文本渲染，提升清晰度 */
}

/* 链接基础样式 */
a {
  color: #5755d9; /* 主题链接色（紫色系，框架标志性颜色） */
  outline: 0;
  text-decoration: none;
}
a:focus {
  box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); /* 焦点状态：淡紫色阴影 */
}
a.active, a:active, a:focus, a:hover {
  color: #302ecd; /* 交互状态链接色（加深紫色） */
  text-decoration: underline;
}
a:visited {
  color: #807fe2; /* 已访问链接色（浅紫色） */
}

/* 标题样式体系（统一层级与间距） */
h1, h2, h3, h4, h5, h6 {
  color: inherit;
  font-weight: 500; /* 标题字重（中等粗细，避免过粗） */
  line-height: 1.2; /* 标题行高，紧凑显示 */
  margin-bottom: .5em; /* 标题下间距 */
  margin-top: 0;
}
/* 辅助标题类（用于非语义化标题场景） */
.h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 500; }
.h1, h1 { font-size: 2rem; }    /* 40px = 2*20px */
.h2, h2 { font-size: 1.6rem; }  /* 32px */
.h3, h3 { font-size: 1.4rem; }  /* 28px */
.h4, h4 { font-size: 1.2rem; }  /* 24px */
.h5, h5 { font-size: 1rem; }    /* 20px */
.h6, h6 { font-size: .8rem; }   /* 16px */

/* 段落样式 */
p {
  margin: 0 0 1.2rem; /* 段落下间距，保证文本块呼吸感 */
}

/* 特殊文本元素样式 */
a, ins, u {
  -webkit-text-decoration-skip: ink edges; /* 优化下划线渲染，避免截断字符 */
  text-decoration-skip: ink edges;
}
abbr[title] { /* 带标题的缩写词：下划线提示 */
  border-bottom: .05rem dotted;
  cursor: help;
  text-decoration: none;
}
kbd { /* 键盘按键样式（灰色背景+圆角） */
  background: #303742;
  border-radius: .1rem;
  color: #fff;
  font-size: .7rem;
  line-height: 1.25;
  padding: .1rem .2rem;
}
mark { /* 标记文本样式（黄色背景） */
  background: #ffe9b3;
  border-bottom: .05rem solid #ffd367;
  border-radius: .1rem;
  color: #3b4351;
  padding: .05rem .1rem 0;
}

/* 引用、列表、定义列表样式 */
blockquote { /* 引用块：左侧边框+内边距 */
  border-left: .1rem solid #dadee4;
  margin-left: 0;
  padding: .4rem .8rem;
}
blockquote p:last-child { margin-bottom: 0; } /* 清除引用内最后一段的下间距 */

ol, ul { /* 有序/无序列表基础样式 */
  margin: .8rem 0 .8rem .8rem;
  padding: 0;
}
ol ol, ol ul, ul ol, ul ul { /* 嵌套列表间距调整 */
  margin: .8rem 0 .8rem .8rem;
}
ol li, ul li { margin-top: .4rem; } /* 列表项上间距，避免拥挤 */

ul { list-style: disc inside; } /* 无序列表：实心圆标记（内部对齐） */
ul ul { list-style-type: circle; } /* 嵌套无序列表：空心圆 */
ol { list-style: decimal inside; } /* 有序列表：数字标记 */
ol ol { list-style-type: lower-alpha; } /* 嵌套有序列表：小写字母 */

dl dt { font-weight: 700; } /* 定义列表标题：加粗 */
dl dd { margin: .4rem 0 .8rem 0; } /* 定义列表描述：下间距 */

/* 多语言文本适配（针对中日韩等CJK文字） */
.lang-zh, .lang-zh-hans, html:lang(zh), html:lang(zh-Hans) {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}
.lang-zh-hant, html:lang(zh-Hant) {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
}
.lang-ja, html:lang(ja) {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
}
.lang-ko, html:lang(ko) {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
}
/* CJK文字下划线优化（避免截断） */
.lang-cjk ins, .lang-cjk u, 
:lang(ja) ins, :lang(ja) u, 
:lang(zh) ins, :lang(zh) u {
  border-bottom: .05rem solid;
  text-decoration: none;
}
/* CJK文字装饰元素间距调整 */
.lang-cjk del+del, .lang-cjk del+s, .lang-cjk ins+ins, .lang-cjk ins+u, 
.lang-cjk s+del, .lang-cjk s+s, .lang-cjk u+ins, .lang-cjk u+u, 
:lang(ja) del+del, :lang(ja) del+s, :lang(ja) ins+ins, :lang(ja) ins+u, 
:lang(ja) s+del, :lang(ja) s+s, :lang(ja) u+ins, :lang(ja) u+u, 
:lang(zh) del+del, :lang(zh) del+s, :lang(zh) ins+ins, :lang(zh) ins+u, 
:lang(zh) s+del, :lang(zh) s+s, :lang(zh) u+ins, :lang(zh) u+u {
  margin-left: .125em;
}

/* ==============================================
   3. 表格样式（基础表格+变体）
   ============================================== */
.table {
  border-collapse: collapse; /* 合并边框 */
  border-spacing: 0;
  text-align: left;
  width: 100%; /* 表格默认占满容器 */
}
/* 条纹表格：奇数行背景色 */
.table.table-striped tbody tr:nth-of-type(odd) {
  background: #f7f8f9;
}
/* 激活行样式 */
.table tbody tr.active, .table.table-striped tbody tr.active {
  background: #eef0f3;
}
/* 悬停行样式 */
.table.table-hover tbody tr:hover {
  background: #eef0f3;
}
/* 滚动表格：横向溢出滚动 */
.table.table-scroll {
  display: block;
  overflow-x: auto;
  padding-bottom: .75rem;
  white-space: nowrap;
}
/* 表格单元格样式 */
.table td, .table th {
  border-bottom: .05rem solid #dadee4; /* 单元格下边框 */
  padding: .6rem .4rem; /* 单元格内边距 */
}
.table th {
  border-bottom-width: .1rem; /* 表头下边框加粗 */
}

/* ==============================================
   4. 按钮样式（基础按钮+变体）
   ============================================== */
.btn {
  -webkit-appearance: none; /* 清除默认外观（适配Safari） */
  -moz-appearance: none;
  appearance: none;
  background: #fff; /* 基础按钮背景 */
  border: .05rem solid #5755d9; /* 基础按钮边框（主题色） */
  border-radius: .1rem; /* 圆角（轻微，现代感） */
  color: #5755d9; /* 基础按钮文本色 */
  cursor: pointer;
  display: inline-block;
  font-size: .8rem; /* 按钮文本大小 */
  height: 1.8rem; /* 按钮固定高度（36px = 1.8*20px） */
  line-height: 1.2rem; /* 按钮文本行高，垂直居中 */
  outline: 0;
  padding: .25rem .4rem; /* 按钮内边距 */
  text-align: center;
  text-decoration: none;
  /* 过渡动画：平滑切换状态 */
  transition: background .2s, border .2s, box-shadow .2s, color .2s;
  -webkit-user-select: none; /* 禁止文本选中 */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap; /* 禁止文本换行 */
}

/* 按钮交互状态 */
.btn:focus {
  box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); /* 焦点阴影 */
}
.btn:focus, .btn:hover {
  background: #f1f1fc; /* 悬停/焦点背景（淡紫） */
  border-color: #4b48d6; /* 边框色加深 */
  text-decoration: none;
}
.btn.active, .btn:active {
  background: #4b48d6; /* 激活/点击背景（深紫） */
  border-color: #3634d2;
  color: #fff; /* 文本变白 */
  text-decoration: none;
}
/* 加载中按钮： spinner 颜色适配（激活状态） */
.btn.active.loading::after, .btn:active.loading::after {
  border-bottom-color: #fff;
  border-left-color: #fff;
}
/* 禁用按钮：半透明+禁止交互 */
.btn.disabled, .btn:disabled, .btn[disabled] {
  cursor: default;
  opacity: .5;
  pointer-events: none;
}

/* 按钮变体：主要按钮（紫色背景） */
.btn.btn-primary {
  background: #5755d9;
  border-color: #4b48d6;
  color: #fff;
}
.btn.btn-primary:focus, .btn.btn-primary:hover {
  background: #4240d4;
  border-color: #3634d2;
  color: #fff;
}
.btn.btn-primary.active, .btn.btn-primary:active {
  background: #3a38d2;
  border-color: #302ecd;
  color: #fff;
}
.btn.btn-primary.loading