/* ========================================
   🏮 古籍卷轴 · 状态栏美化系统
   ======================================== */

/* ----- 1. 全局容器 ----- */
scroll-ui {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background: #f5e6d3;
  font-family: "ZCOOL KuaiLe", "Ma Shan Zheng", "Liu Jian Mao Cao", serif;
  color: #3d2817;
  line-height: 1.8;
  position: relative;
  overflow: hidden;
}

/* 纸张纹理 */
scroll-ui::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(61, 40, 23, 0.015) 0px,
      transparent 1px,
      transparent 2px,
      rgba(61, 40, 23, 0.015) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(61, 40, 23, 0.01) 0px,
      transparent 1px,
      transparent 2px,
      rgba(61, 40, 23, 0.01) 3px
    );
  pointer-events: none;
  z-index: 0;
}

/* ----- 2. 单页卷轴 ----- */
leaf {
  display: block;
  position: relative;
  background: linear-gradient(to bottom, #fef9f00%, #f5e6d3 100%);
  margin: 16px auto;
  padding: 20px 16px;
  border: 2px solid #d4b896;
  border-radius: 8px;
  box-shadow: 
    0 2px 8px rgba(61, 40, 23, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  max-width: 96%;
}

/* 水墨装饰 - 左上角 */
leaf::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 80px;
  height: 80px;
  background: 
    radial-gradient(ellipse at 20% 20%, rgba(139, 69, 19, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 40% 50%, rgba(139, 69, 19, 0.05) 0%, transparent 50%);
  border-radius: 8px 0 0 0;
  pointer-events: none;
}

/* 水墨装饰 - 右下角 */
leaf::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 60px;
  height: 60px;
  background: 
    radial-gradient(ellipse at 80% 80%, rgba(139, 69, 19, 0.06) 0%, transparent 60%);
  border-radius: 0 0 8px 0;
  pointer-events: none;
}

/* ----- 3. 页面标题 ----- */
leaf-title {
  display: block;
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #c49a6c;
  position: relative;
}

leaf-title .title-main {
  font-size: 24px;
  font-weight: bold;
  color: #8b4513;
  margin: 0 0 4px 0;
  letter-spacing: 4px;
  text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.2);
}

leaf-title .title-sub {
  font-size: 11px;
  color: #a0826d;
  letter-spacing: 2px;
  margin: 0;
  font-family: "Courier New", monospace;
}

/* 朱红印章装饰 */
leaf-title::after {
  content: "御";
  position: absolute;
  right: 8px;
  bottom: -14px;
  width: 28px;
  height: 28px;
  background: #c8404f;
  color: #fef9f0;
  font-size: 16px;
  font-weight: bold;
  line-height: 28px;
  text-align: center;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(200, 64, 79, 0.4);
  transform: rotate(-8deg);
}

/* ----- 4. 名牌印章区 ----- */
name-seal {
  display: block;
  text-align: center;
  margin: 0 0 16px 0;
  padding: 12px;
  background: linear-gradient(135deg, rgba(200, 64, 79, 0.08) 0%, rgba(139, 69, 19, 0.06) 100%);
  border-left: 3px solid #c8404f;
  border-radius: 4px;
}

name-seal .name {
  font-size: 20px;
  font-weight: bold;
  color: #8b4513;
  margin: 0 0 4px 0;
  letter-spacing: 2px;
}

name-seal .rank {
  font-size: 13px;
  color: #a0826d;
  margin: 0;
}

/* ----- 5. 圣旨区（龙庭用） ----- */
decree {
  display: block;
  background: rgba(200, 64, 79, 0.05);
  border: 1px solid #d4b896;
  border-radius: 6px;
  padding: 12px;
  margin: 0 0 16px 0;
  text-align: center;
}

decree p {
  margin: 4px 0;
  font-size: 13px;
  color: #5d4037;
}

/* ----- 6. 折叠区域<details> ----- */
details {
  margin: 12px 0;
  border: 1px solid #d4b896;
  border-radius: 6px;
  background: rgba(254, 249, 240, 0.6);
  overflow: hidden;
}

details summary {
  padding: 10px 14px;
  background: linear-gradient(to right, rgba(139, 69, 19, 0.1) 0%, transparent 100%);
  color: #8b4513;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  position: relative;
  transition: background 0.2s ease;
}

details summary::-webkit-details-marker {
  display: none;
}

/*展开/收起箭头 */
details summary::before {
  content: "▶";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #c8404f;
  transition: transform 0.2s ease;
}

details[open] summary::before {
  transform: translateY(-50%) rotate(90deg);
}

details summary:hover {
  background: linear-gradient(to right, rgba(139, 69, 19, 0.15) 0%, transparent 100%);
}

/* 折叠内容区*/
details > *:not(summary) {
  padding: 0 14px 12px 14px;
}

/* ----- 7. 信息容器 ----- */
info, imperial, archive, record, body, mind {
  display: block;
  font-size: 13px;
  line-height: 1.9;
  color: #5d4037;
}

info p, imperial p, archive p, record p, body p {
  margin: 6px 0;
}

mind {
  font-style: italic;
  background: rgba(139, 69, 19, 0.04);
  padding: 10px;
  border-left: 3px solid #c8404f;
  border-radius: 4px;
  color: #6d4c41;
}

/* ----- 8. 分割线 ----- */
divider {
  display: block;
  height: 1px;
  margin: 12px 0;
  background: linear-gradient(to right, transparent0%, #d4b896 50%, transparent 100%);
}

divider.gold {
  background: linear-gradient(to right, transparent 0%, #c49a6c 50%, transparent 100%);
}

divider.red {
  background: linear-gradient(to right, transparent 0%, #c8404f 50%, transparent 100%);
}

/* ----- 9. 波浪线Tooltip<wave> ----- */
wave {
  position: relative;
  display: inline;
  color: #c8404f;
  font-weight: bold;
  cursor: help;
  border-bottom: 2px dotted #c8404f;
}

wave::before {
  content: attr(data-info);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  opacity: 0;
  visibility: hidden;
  background: linear-gradient(135deg, #c8404f 0%, #a83943 100%);
  color: #fef9f0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.6;
  white-space: normal;
  max-width: 240px;
  width: max-content;
  box-shadow: 0 4px 12px rgba(200, 64, 79, 0.3);
  border: 1px solid rgba(254, 249, 240, 0.2);
  z-index: 1000;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

wave::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #c8404f;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}

wave:hover::before,
wave:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* ----- 10. 驯化进度条 ----- */
.tame-bar {
  width: 100%;
  height: 8px;
  background: rgba(139, 69, 19, 0.15);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
}

.tame-fill {
  display: block;
  height: 100%;
  background: linear-gradient(to right, #c8404f 0%, #e85d6f 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* ----- 11. 江山页面 -卡片布局 ----- */
board {
  display: block;
}

card {
  display: block;
  background: rgba(254, 249, 240, 0.8);
  border: 1px solid #d4b896;
  border-radius: 6px;
  margin: 12px 0;
  overflow: hidden;
}

card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(to right, rgba(139, 69, 19, 0.08) 0%, transparent 100%);
  border-bottom: 1px solid #e8d5c0;
}

card-head .card-title {
  font-size: 15px;
  font-weight: bold;
  color: #8b4513;
  margin: 0;
}

card-head .card-meta {
  font-size: 11px;
  color: #a0826d;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

card-body {
  padding: 12px 14px;
}

card-body .line {
  margin: 8px 0;
  padding: 6px 10px;
  background: rgba(139, 69, 19, 0.03);
  border-left: 2px solid #d4b896;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.7;
}

card-body .action {
  margin: 8px 0;
  padding: 8px 12px;
  background: rgba(200, 64, 79, 0.05);
  border-left: 3px solid #c8404f;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease;
}

card-body .action:hover {
  background: rgba(200, 64, 79, 0.1);
}

card-body .action span {
  color: #c8404f;
  font-weight: bold;
}

/* ----- 12. 网格布局（江山页面） ----- */
grid {
  display: grid;
  grid-template-columns:1fr;
  gap: 12px;margin: 12px 0;
}

@media (min-width: 768px) {
  grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ----- 13. 标签 ----- */
.tag {
  display: inline-block;
  padding: 2px 8px;
  background: #d4b896;
  color: #5d4037;
  font-size: 11px;
  border-radius: 3px;
  margin-right: 6px;
  font-weight: bold;
}

.tag.alert {
  background: #c8404f;
  color: #fef9f0;
}

.tag.red {
  background: #c8404f;
  color: #fef9f0;
}

/* ----- 14. 指示灯 ----- */
.lamp {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4b896;
}

.lamp.green {
  background: #7cb342;
  box-shadow: 0 0 6px rgba(124, 179, 66, 0.5);
}

.lamp.amber {
  background: #ffa726;
  box-shadow: 0 0 6px rgba(255, 167, 38, 0.5);
}

.lamp.red {
  background: #e53935;
  box-shadow: 0 0 6px rgba(229, 57, 53, 0.5);
}

/* ----- 15. 印章 stamp ----- */
stamp {
  display: inline-block;
  padding: 2px 6px;
  background: #c8404f;
  color: #fef9f0;
  font-size: 10px;
  font-weight: bold;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(200, 64, 79, 0.3);
  transform: rotate(-2deg);
}

/* ----- 16. 灰色文本（档案用） ----- */
.dim {
  color: #a0826d;
  font-weight: bold;
  margin-top: 12px;
  font-size: 12px;
}

/* ----- 17. 警告文本 ----- */
.warn {
  color: #c8404f;
  font-size: 12px;
  font-weight: bold;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(200, 64, 79, 0.08);
  border-left: 3px solid #c8404f;
  border-radius: 3px;
}

/* ----- 18. 思维链隐藏 <think>（加强版） ----- */
think {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  border: none !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

/* ----- 19. 移动端优化 ----- */
@media (max-width: 767px) {
  leaf {
    margin: 12px auto;
    padding: 16px 12px;
  }
  leaf-title .title-main {
    font-size: 20px;
    letter-spacing: 2px;
  }
  
  name-seal .name {
    font-size: 18px;}
  
  wave::before {
    max-width: 200px;
    font-size: 11px;
  }
}

/* ----- 20. 电脑端优化 ----- */
@media (min-width: 768px) {
  scroll-ui {
    max-width: 900px;
  }
  
  leaf {
    padding: 24px 20px;
  }
}

/* ----- 21. 心理描写标签（新增） ----- */

/* 女性心理独白 ·粉紫色 · 古风花笺风格 */
her {
  display: block;
  font-style: italic;
  color: #c2185b;
  padding: 6px 14px;
  margin: 8px 0;
  border-left: 3px solid rgba(194, 24, 91, 0.5);
  background: linear-gradient(90deg, rgba(194, 24, 91, 0.06), transparent80%);
  border-radius: 0 4px 4px 0;
  font-size: 0.92em;
  line-height: 1.7;
  position: relative;
}

/* 花瓣装饰 */
her::before {
  content: "❀";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0.25;
  font-style: normal;
}

/* 丈夫心理独白 ·暗绿色 · NTR专用 */
him {
  display: block;
  font-style: italic;
  color: #2e7d32;
  padding: 6px 14px;
  margin: 8px 0;
  border-left: 3px solid rgba(46, 125, 50, 0.5);
  background: linear-gradient(90deg, rgba(46, 125, 50, 0.06), transparent 80%);
  border-radius: 0 4px 4px 0;
  font-size: 0.92em;
  line-height: 1.7;
}

/* ==========================================🎨 凤仪宫 · 平台UI兜底美化CSS
   范围：输入框、按钮、评论区、模组选择器等
   ========================================== */

/* ===== 配色变量复用 ===== */
:root {
  --warm-cream: #F7F4EF;
  --warm-light: #FBF9F5;
  --warm-white: #FFFFFF;
  --warm-border: #E7E1D7;
  --warm-terra: #C4612F;
  --warm-hover: #A94E22;
  --warm-tint: #F2E3D6;
  --warm-shadow: rgba(31, 36, 33, 0.08);
}

/* ===== 1. 输入框美化 ===== */
textarea,
input[type="text"],
input[type="search"] {
  background: var(--warm-cream) !important;
  border: 1px solid var(--warm-border) !important;
  border-radius: 12px !important;
  color: #1F2421 !important;
  padding: 12px 16px !important;
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  box-shadow: 
    inset 0 2px 6px rgba(31, 36, 33, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: all 0.3s ease !important;
}

textarea:focus,
input[type="text"]:focus,
input[type="search"]:focus {
  background: var(--warm-white) !important;
  border-color: var(--warm-terra) !important;
  box-shadow: 
    inset 0 2px 6px rgba(31, 36, 33, 0.06),
    0 0 0 3px rgba(196, 97, 47, 0.15) !important;
  outline: none !important;
}

textarea::placeholder,
input::placeholder {
  color: #9C9288 !important;
  opacity: 0.6 !important;
}

/*输入框纸张纹理 */
textarea::before,
input[type="text"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(92, 99, 93, 0.02) 2px, rgba(92, 99, 93, 0.02) 4px) !important;
  pointer-events: none !important;
}

/* ===== 2. 按钮美化 ===== */
button,
.button,
[role="button"] {
  background: linear-gradient(135deg, var(--warm-tint) 0%, var(--warm-light) 100%) !important;
  color: var(--warm-terra) !important;
  border:1px solid var(--warm-border) !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 
    0 2px 8px var(--warm-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  position: relative !important;
  overflow: hidden !important;
}

button::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.5s ease !important;
}

button:hover {
  background: linear-gradient(135deg, var(--warm-terra) 0%, var(--warm-hover) 100%) !important;
  color: var(--warm-white) !important;
  border-color: var(--warm-terra) !important;
  transform: translateY(-2px) !important;
  box-shadow: 
    0 4px 16px rgba(196, 97, 47, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

button:hover::before {
  left: 100% !important;
}

button:active {
  transform: translateY(0) !important;
  box-shadow: 
    0 2px 6px var(--warm-shadow),
    inset 0 2px 4px rgba(31, 36, 33, 0.1) !important;
}

button:disabled {
  background: #E7E1D7 !important;
  color: #9C9288 !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.6 !important;
}

/*主要按钮（发送等） */
button[type="submit"],
button.primary,
.button-primary {
  background: linear-gradient(135deg, var(--warm-terra) 0%, var(--warm-hover) 100%) !important;
  color: var(--warm-white) !important;
  border-color: var(--warm-hover) !important;
  font-weight: 600 !important;
}

button[type="submit"]:hover,
button.primary:hover,
.button-primary:hover {
  background: linear-gradient(135deg, var(--warm-hover) 0%, #8C3E1A 100%) !important;
  box-shadow: 
    0 6px 20px rgba(196, 97, 47, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* ===== 3. 评论区美化 ===== */
.comment,
.comment-item,
[class*="comment"] {
  background: var(--warm-white) !important;
  border: 1px solid var(--warm-border) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 8px var(--warm-shadow) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.comment::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: linear-gradient(180deg, var(--warm-terra), var(--warm-hover)) !important;
  border-radius: 12px 0 0 12px !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.comment:hover {
  box-shadow: 0 4px 16px rgba(31, 36, 33, 0.12) !important;
  transform: translateX(4px) !important;
}

.comment:hover::before {
  opacity: 1 !important;
}

/* 评论头部 */
.comment-header,
.comment-meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px dashed var(--warm-border) !important;
}

.comment-author {
  font-weight: 600 !important;
  color: var(--warm-terra) !important;
  font-size: 14px !important;
}

.comment-time {
  font-size: 12px !important;
  color: #9C9288 !important;
}

/* 评论内容 */
.comment-content,
.comment-body {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #1F2421 !important;
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif !important;
}

/*===== 4. 模组选择器美化 ===== */
.mod-selector,
.module-selector,
[class*="mod-"],
select {
  background: var(--warm-cream) !important;
  border: 1px solid var(--warm-border) !important;
  border-radius: 10px !important;
  padding: 10px 36px 10px 14px !important;
  font-family: 'LXGW WenKai', 'Noto Serif SC', serif !important;
  font-size: 14px !important;
  color: #1F2421 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 
    0 2px 6px var(--warm-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23C4612F' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}

.mod-selector:hover,
select:hover {
  border-color: var(--warm-terra) !important;
  box-shadow: 
    0 3px 10px rgba(31, 36, 33, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.mod-selector:focus,
select:focus {
  border-color: var(--warm-terra) !important;
  box-shadow: 
    0 0 0 3px rgba(196, 97, 47, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  outline: none !important;
}

/*模组选项 */
option {
  background: var(--warm-white) !important;
  color: #1F2421 !important;
  padding: 8px 12px !important;
}

option:hover,
option:checked {
  background: var(--warm-tint) !important;
  color: var(--warm-terra) !important;
}

/* ===== 5. 卡片容器美化 ===== */
.card,
.panel,
[class*="card-"] {
  background: var(--warm-white) !important;
  border: 1px solid var(--warm-border) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  box-shadow: 
    0 3px 12px var(--warm-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--warm-terra), var(--warm-hover), var(--warm-terra)) !important;
  transform: scaleX(0) !important;
  transition: transform 0.4s ease !important;
}

.card:hover {
  box-shadow: 
    0 6px 24px rgba(31, 36, 33, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-4px) !important;
}

.card:hover::before {
  transform: scaleX(1) !important;
}

/*===== 6. 标签美化 ===== */
.tag,
.label,
.badge,
[class*="tag-"] {
  display: inline-block !important;
  padding: 4px 12px !important;
  background: var(--warm-tint) !important;
  color: var(--warm-terra) !important;
  border: 1px solid var(--warm-border) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
}

.tag:hover {
  background: var(--warm-terra) !important;
  color: var(--warm-white) !important;
  border-color: var(--warm-terra) !important;
}

/* ===== 7. 链接美化 ===== */
a {
  color: var(--warm-terra) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}

a:hover {
  color: var(--warm-hover) !important;
  border-bottom-color: var(--warm-hover) !important;
}

/* ===== 8. 分隔线美化 ===== */
hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--warm-border), transparent) !important;
  margin: 24px 0 !important;position: relative !important;
}

hr::after {
  content: '◆' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: var(--warm-cream) !important;
  padding: 0 12px !important;
  color: var(--warm-terra) !important;
  font-size: 10px !important;
}

/* ===== 9. 复选框/单选框美化 ===== */
input[type="checkbox"],
input[type="radio"] {
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--warm-border) !important;
  border-radius: 4px !important;
  background: var(--warm-cream) !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

input[type="radio"] {
  border-radius: 50% !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--warm-terra) !important;
  border-color: var(--warm-terra) !important;
}

input[type="checkbox"]:checked::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: var(--warm-white) !important;
  font-size: 12px !important;
  font-weight: bold !important;
}

input[type="radio"]:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--warm-white) !important;
  border-radius: 50% !important;
}

/* ===== 10.滑块美化 ===== */
input[type="range"] {
  appearance: none !important;
  width: 100% !important;
  height: 6px !important;
  background: var(--warm-border) !important;
  border-radius: 999px !important;
  outline: none !important;
  cursor: pointer !important;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--warm-terra) !important;
  border: 2px solid var(--warm-white) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(196, 97, 47, 0.3) !important;
  transition: all 0.2s ease !important;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2) !important;
  box-shadow: 0 3px 10px rgba(196, 97, 47, 0.4) !important;
}

/* ===== 11. 通知/提示框美化 ===== */
.notification,
.alert,
.toast,
[class*="notification-"],
[class*="alert-"] {
  background: var(--warm-white) !important;
  border: 1px solid var(--warm-border) !important;
  border-left: 4px solid var(--warm-terra) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 16px var(--warm-shadow) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #1F2421 !important;
  animation: slideInRight 0.4s ease !important;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.notification.success,
.alert-success {
  border-left-color: #4CAF50 !important;background: #F1F8F4 !important;
}

.notification.warning,
.alert-warning {
  border-left-color: #FF9800 !important;
  background: #FFF8F0 !important;
}

.notification.error,
.alert-error {
  border-left-color: #F44336 !important;
  background: #FFF5F5 !important;
}

/* ===== 12. 加载状态美化 ===== */
.loading,
.spinner,
[class*="loading"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--warm-terra) !important;
  font-size: 14px !important;
}

.loading::before {
  content: '' !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid var(--warm-border) !important;
  border-top-color: var(--warm-terra) !important;
  border-radius: 50% !important;
  animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== 13. 模态框/对话框美化 ===== */
.modal,
.dialog,
[class*="modal-"] {
  background: var(--warm-white) !important;
  border: 2px solid var(--warm-border) !important;
  border-radius: 16px !important;
  padding: 28px 32px !important;
  box-shadow: 
    0 12px 48px rgba(31, 36, 33, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  max-width: 600px !important;
  margin: 20px auto !important;
  position: relative !important;
}

.modal::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--warm-terra), var(--warm-hover), var(--warm-terra)) !important;
  border-radius: 16px 16px 0 0 !important;
}

/*模态框标题 */
.modal-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--warm-terra) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--warm-border) !important;
}

/*===== 14. 列表美化 ===== */
ul, ol {
  list-style: none !important;
  padding-left: 0 !important;
}

li {
  padding: 8px 0 8px 24px !important;
  position: relative !important;
  line-height: 1.7 !important;
}

li::before {
  content: '◆' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--warm-terra) !important;
  font-size: 10px !important;
}

/* ===== 15. 表格美化 ===== */
table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--warm-white) !important;
  border: 1px solid var(--warm-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

thead {
  background: linear-gradient(135deg, var(--warm-tint), var(--warm-light)) !important;
}

th {
  padding: 14px 16px !important;
  font-weight: 600 !important;
  color: var(--warm-terra) !important;
  text-align: left !important;
  border-bottom: 2px solid var(--warm-border) !important;
}

td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--warm-border) !important;
  color: #1F2421 !important;
}

tr:last-child td {
  border-bottom: none !important;
}

tr:hover {
  background: var(--warm-cream) !important;
}

/* ===== 16. 代码块美化 ===== */
pre, code {
  background: #2B2520 !important;
  color: #E8E3DC !important;
  border: 1px solid #4A3F35 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
}

code {
  padding: 2px 6px !important;
  display: inline !important;
}

/* ===== 17. 引用块美化 ===== */
blockquote {
  background: var(--warm-cream) !important;
  border-left: 4px solid var(--warm-terra) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 16px 20px !important;
  margin: 16px 0 !important;
  color: #5C635D !important;
  font-style: italic !important;
  position: relative !important;
}

blockquote::before {
  content: '"' !important;
  position: absolute !important;
  top: 8px !important;
  left: 12px !important;
  font-size: 48px !important;
  color: var(--warm-terra) !important;
  opacity: 0.15 !important;
  font-family: Georgia, serif !important;
}

/* ===== 18. 进度条美化 ===== */
progress {
  appearance: none !important;
  width: 100% !important;
  height: 8px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--warm-border) !important;
  overflow: hidden !important;
}

progress::-webkit-progress-bar {
  background: var(--warm-border) !important;
  border-radius: 999px !important;
}

progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--warm-terra), var(--warm-hover)) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 8px rgba(196, 97, 47, 0.5) !important;
}

/* ===== 19. 工具提示美化 ===== */
[title]:hover::after {
  content: attr(title) !important;
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--warm-white) !important;
  border: 2px solid var(--warm-terra) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  color: #1F2421 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 16px var(--warm-shadow) !important;
  z-index: 1000 !important;
}

/* ===== 20. 响应式适配 ===== */
@media (max-width: 768px) {
  button,
  .button {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
  
  .card,
  .panel {
    padding: 16px !important;
  }
  
  .modal,
  .dialog {
    padding: 20px 16px !important;
    margin: 12px !important;
  }
}

/* ===== 结束 ===== */

/* =========================================================
   第一段：隐藏平台原生三个加载圆点
   作用：清除默认动画，避免它与古风卷轴效果叠在一起
   ========================================================= */
.flex.gap-2.w-full.h-full.items-center.justify-center > span {
  display: none !important;
}
/* =========================================================
   第二段：强制扩大加载框，并固定为横向卷轴
   作用：解决加载框缩成小方块、文字竖排的问题
   ========================================================= */
.flex.gap-2.w-full.h-full.items-center.justify-center {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  isolation: isolate !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: min(94%, 680px) !important;
  min-width: min(94%, 320px) !important;
  max-width: 680px !important;
  height: 164px !important;
  min-height: 164px !important;
  max-height: 164px !important;
  aspect-ratio: auto !important;
  margin: auto !important;
  padding: 24px 72px !important;
  align-items: center !important;
  justify-content: center !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  border: 1px solid rgba(127, 79, 31, 0.62) !important;
  border-radius: 20px 8px 20px 8px !important;
  color: #5f351c !important;
  background-color: #f5e7c9 !important;
  background-image:
    radial-gradient(circle at 14% 18%, rgba(178, 54, 37, 0.10) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 73%, rgba(99, 65, 31, 0.10) 0 2px, transparent 3px),
    linear-gradient(90deg, rgba(107, 69, 30, 0.10) 0 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(116, 77, 38, 0.022) 0 1px, transparent 1px 5px),
    linear-gradient(112deg, #ead6aa 0%, #fffaf0 18%, #f6e8c9 48%, #fff9e9 79%, #dfc28b 100%) !important;
  background-size: auto, auto, 100%100%, 100% 100%, 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow:
    inset 0 0 0 4px rgba(255, 251, 235, 0.72),
    inset 0 0 24px rgba(116, 70, 28, 0.20),
    0 8px 24px rgba(80, 47, 22, 0.18),
    0 0 0 1px rgba(255, 245, 211, 0.78) !important;
  opacity: 1 !important;
  filter: none !important;
  animation: fy-scroll-breathe 3.6s ease-in-out infinite !important;
}
/* =========================================================
   第三段：卷轴内部动态水墨与金线
   作用：增加华丽度；动画使用内联SVG的SMIL实现，性能较稳定
   ========================================================= */
.flex.gap-2.w-full.h-full.items-center.justify-center::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 9px25px !important;
  width: auto !important;
  height: auto !important;
  border: 1px solid rgba(151, 104, 47, 0.32) !important;
  border-radius: 13px 4px 13px 4px !important;
  opacity: 0.94 !important;
  pointer-events: none !important;
  background-color: transparent !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='150' viewBox='0 0 700 150'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2387522f' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23b88b43' stop-opacity='.65'/%3E%3Cstop offset='.5' stop-color='%23f4d98a' stop-opacity='.95'/%3E%3Cstop offset='.75' stop-color='%23b88b43' stop-opacity='.65'/%3E%3Cstop offset='1' stop-color='%2387522f' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M20 78 Q105 20 196 74 T370 72 T548 77 T680 67' fill='none' stroke='%236b4528' stroke-opacity='.11' stroke-width='18' filter='url(%23b)'/%3E%3Cpath d='M18 112 Q95 79 167 111 T319 109 T480 111 T682 100' fill='none' stroke='%236a7b50' stroke-opacity='.13' stroke-width='3'/%3E%3Cpath d='M80 38 Q112 13 145 38 Q113 29 80 38Z' fill='%237b8658' fill-opacity='.15'/%3E%3Cpath d='M550 39 Q585 11 618 42 Q585 29 550 39Z' fill='%237b8658' fill-opacity='.13'/%3E%3Crect x='55' y='73' width='590' height='1.5' rx='1' fill='url(%23g)'%3E%3Canimate attributeName='opacity' values='.18;.95;.18' dur='2.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Ccircle cy='74' r='4' fill='%23a94731'%3E%3Canimate attributeName='cx' values='68;632;68' dur='4.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0;1;1;0' dur='4.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='350' cy='74' r='18' fill='none' stroke='%23b1813f' stroke-opacity='.5'%3E%3Canimate attributeName='r' values='4;27;4' dur='2.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='.8;0;.8' dur='2.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow:
    inset 0 0 18px rgba(135, 82, 33, 0.08),
    0 0 12px rgba(194, 144, 66, 0.10) !important;
  transform: translateZ(0) !important;
  animation: fy-paper-light4.2s ease-in-out infinite !important;
}
/* =========================================================
   第四段：横向加载文字
   作用：强制"御览中"从左至右排列，并加入印章、分隔符和提示文字
   ========================================================= */
.flex.gap-2.w-full.h-full.items-center.justify-center::after {
  content: "御览中　◆　静候御笔" !important;
  display: block !important;
  position: relative !important;
  width: auto !important;
  max-width: calc(100% - 24px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 9px 20px 10px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-align: center !important;
  font-family: "STKaiti", "KaiTi", "FangSong", "Noto Serif SC", serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.22em !important;
  color: #693a20 !important;
  opacity: 1 !important;
  border-top: 1px solid rgba(169, 112, 43, 0.34) !important;
  border-bottom: 1px solid rgba(169, 112, 43, 0.34) !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 251, 232, 0.78) 18%, rgba(255, 248, 221, 0.92) 50%, rgba(255, 251, 232, 0.78) 82%, transparent) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.82), 0 5px 14px rgba(116, 69, 30, 0.08) !important;
  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.95) !important;
  transform: translateZ(0) !important;
  animation: fy-imperial-text 2.4s ease-in-out infinite !important;
}
/* =========================================================
   第五段：轻量动画
   作用：框体呼吸、纸面光泽、文字微动；不使用高速旋转
   ========================================================= */
@keyframes fy-scroll-breathe {
  0%, 100% {
    box-shadow:
      inset 0 0 0 4px rgba(255, 251, 235, 0.72),
      inset 0 0 24px rgba(116, 70, 28, 0.18),
      0 8px 24px rgba(80, 47, 22, 0.16),
      0 0 0 1px rgba(255, 245, 211, 0.76) !important;
  }
  50% {
    box-shadow:
      inset 0 0 0 4px rgba(255, 253, 240, 0.90),
      inset 0 0 30px rgba(157, 94, 34, 0.24),
      0 11px 30px rgba(80, 47, 22, 0.22),
      0 0 14px rgba(202, 155, 75, 0.20) !important;
  }
}
@keyframes fy-paper-light {
  0%, 100% {
    opacity: 0.78 !important;
    filter: saturate(0.92) brightness(0.98) !important;
  }
  50% {
    opacity: 1 !important;
    filter: saturate(1.08) brightness(1.04) !important;
  }
}
@keyframes fy-imperial-text {
  0%, 100% {
    color: #63351d !important;
    letter-spacing: 0.20em !important;
    opacity: 0.78 !important;
    transform: translateY(1px) translateZ(0) !important;
  }
  50% {
    color: #8a3f27 !important;
    letter-spacing: 0.25em !important;
    opacity: 1 !important;
    transform: translateY(-1px) translateZ(0) !important;
  }
}
/* =========================================================
   第六段：移动端适配
   作用：保持横向，不再缩成竖排小方框；略微减少特效开销
   ========================================================= */
@media (max-width: 768px) {
  .flex.gap-2.w-full.h-full.items-center.justify-center {
    width: calc(100% - 16px) !important;
    min-width: 280px !important;
    max-width: calc(100% - 16px) !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    margin: 10px auto !important;
    padding: 20px 38px !important;
    border-radius: 16px 6px 16px 6px !important;
    animation-duration: 4.4s !important;
  }
  .flex.gap-2.w-full.h-full.items-center.justify-center::before {
    inset: 8px 17px !important;
    background-size: cover !important;
    animation-duration: 5s !important;
  }
  .flex.gap-2.w-full.h-full.items-center.justify-center::after {
    content: "御览中　◆　静候御笔" !important;
    max-width: calc(100% - 8px) !important;
    padding: 8px 10px 9px !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.12em !important;
    animation-duration: 2.8s !important;
  }
}
@media (max-width: 360px) {
  .flex.gap-2.w-full.h-full.items-center.justify-center {
    min-width: 250px !important;
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
    padding: 18px 28px !important;
  }
  .flex.gap-2.w-full.h-full.items-center.justify-center::after {
    content: "御览中 ·静候御笔" !important;
    font-size: 14px !important;
    letter-spacing: 0.06em !important;
  }
}
/* =========================================================
   第七段：系统开启"减少动态效果"时自动降载
   作用：低性能设备仍保留完整外观，但停止循环动画
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .flex.gap-2.w-full.h-full.items-center.justify-center,
  .flex.gap-2.w-full.h-full.items-center.justify-center::before,
  .flex.gap-2.w-full.h-full.items-center.justify-center::after {
    animation: none !important;
  }
}
/* =========================================================
   手机端窄版卷轴修复
   目标：不再铺满屏幕，改为缩窄并向右移动，保证完整可见
   电脑端不受影响
   ========================================================= */
@media (max-width: 768px) {
  .flex.gap-2.w-full.h-full.items-center.justify-center {
    --scroll-mobile-width: 520px;
    --scroll-mobile-x: 78px;
    display: flex !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: min(var(--scroll-mobile-width), calc(100vw - 150px)) !important;
    min-width: min(var(--scroll-mobile-width), calc(100vw - 150px)) !important;
    max-width: min(var(--scroll-mobile-width), calc(100vw - 150px)) !important;
    height: 138px !important;
    min-height: 138px !important;
    max-height: 138px !important;
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    margin: 12px 0 12px 0 !important;
    padding: 18px 36px !important;
    left: var(--scroll-mobile-x) !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset-block: auto !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    transform: none !important;
    aspect-ratio: auto !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    overflow: hidden !important;
  }
  .flex.gap-2.w-full.h-full.items-center.justify-center::before {
    box-sizing: border-box !important;
    inset: 8px 16px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    transform: translateZ(0) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
  }
  .flex.gap-2.w-full.h-full.items-center.justify-center::after {
    content: "御览中　◆　静候御笔" !important;
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 8px 12px 9px !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    font-size: clamp(13px, 3.5vw, 16px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.08em !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
  }
}
/* ----- 22. 实时舆图 realm-map（新增） ----- */
realm-map {
  display: block;
  padding: 10px 8px;
  font-size: 13px;
  line-height: 2;
  color: #5d4037;
}

realm-map .loc {
  color: #8b4513;
  font-weight: bold;
  margin: 3px 0;
  padding-left: 8px;
  position: relative;
}

realm-map .loc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background: #d4b896;
  border-radius: 2px;
}

realm-map .loc-current {
  color: #c8404f;
  font-weight: bold;
  margin: 3px 0;
  padding: 2px 8px;
  background: rgba(200, 64, 79, 0.06);
  border-radius: 4px;
  position: relative;
}

realm-map .loc-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 14px;
  background: #c8404f;
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(200, 64, 79, 0.4);
}

realm-map .npc-line {
  color: #7d6b5d;
  margin: 1px 0;
  padding-left: 28px;
  font-size: 12px;
  line-height: 1.8;
}

realm-map .fog {
  color: #a0826d;
  font-style: italic;
  padding-left: 8px;
  font-size: 12px;
  opacity: 0.7;
}
/* ===== 完整CSS结束 ===== */