@charset "utf-8";
/* ==========================================================================
   read.css —— 阅读页专用样式（三主题）
   依据：开发计划书 10.1 设计体系（阅读三主题）/ 10.4 阅读页线框 / 10.7 read.js
   三主题：日间米白 #F7F4EE / 夜间墨黑 #2B2B2B（字 #999）/ 护眼豆绿 #E3EDCD
   主题由 read.js 切换到 body 上的 class：theme-day / theme-night / theme-green
   ========================================================================== */

/* ------------------------------ 阅读容器 ------------------------------ */
.xs-read-wrap{
  width:860px;
  margin:0 auto;
  padding:0 0 60px;
}
body.theme-night .xs-read-wrap{ color:#999; }
body.theme-green .xs-read-wrap{ color:#3B4A28; }

/* 面包屑 */
.xs-read-crumb{
  padding:14px 0;
  font-size:13px;
  color:#888;
}
.xs-read-crumb a{ color:#888; }
.xs-read-crumb a:hover{ color:#C92C2C; }
body.theme-night .xs-read-crumb,
body.theme-night .xs-read-crumb a{ color:#777; }
body.theme-green .xs-read-crumb,
body.theme-green .xs-read-crumb a{ color:#6A7A55; }

/* 标题栏 */
.xs-read-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:12px;
  border-bottom:2px solid #C92C2C;
}
.xs-read-title{
  font-size:22px;
  font-weight:600;
  color:#333;
  word-break:break-word;
}
body.theme-night .xs-read-title{ color:#C8C8C8; }
body.theme-green .xs-read-title{ color:#3B4A28; }
.xs-read-meta{
  flex:0 0 auto;
  font-size:13px;
  color:#888;
}
body.theme-night .xs-read-meta{ color:#777; }
body.theme-green .xs-read-meta{ color:#6A7A55; }

/* ------------------------------ 正文区 ------------------------------ */
.xs-read-content{
  max-width:800px;
  margin:26px auto;
  line-height:2;
  font-size:18px;              /* read.js 会按用户设置覆盖 */
  color:#333;
  word-wrap:break-word;
  overflow-wrap:break-word;
  letter-spacing:.02em;
}
.xs-read-content p{
  margin:0 0 1em;
  text-indent:2em;
}
.xs-read-content b,
.xs-read-content strong{ font-weight:600; }
.xs-read-content em,
.xs-read-content i{ font-style:italic; }
.xs-read-content img{ max-width:100%; height:auto; }

/* 三主题正文字色 */
body.theme-night{ background:#2B2B2B; }
body.theme-night .xs-read-content{ color:#999; }
body.theme-night .xs-read-content p{ color:#999; }

body.theme-green{ background:#E3EDCD; }
body.theme-green .xs-read-content{ color:#3B4A28; }
body.theme-green .xs-read-content p{ color:#3B4A28; }

/* ------------------------------ VIP 购买引导 ------------------------------ */
.xs-read-vip{
  background:#fff;
  border:1px solid #E8E2D8;
  border-radius:6px;
  padding:44px 20px;
  text-align:center;
  margin:26px 0;
}
body.theme-night .xs-read-vip{
  background:#3A3A3A;
  border-color:#4A4A4A;
}
body.theme-green .xs-read-vip{
  background:#F2F7E6;
  border-color:#CBD9AC;
}
.xs-read-vip .layui-icon{
  font-size:46px;
  color:#C9A063;
}
.xs-read-vip h3{
  margin:14px 0 8px;
  font-size:19px;
  color:#333;
}
body.theme-night .xs-read-vip h3{ color:#C8C8C8; }
body.theme-green .xs-read-vip h3{ color:#3B4A28; }
.xs-read-vip p{
  color:#888;
  font-size:14px;
}
body.theme-night .xs-read-vip p{ color:#999; }

/* ------------------------------ 上/下一章导航 ------------------------------ */
.xs-read-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:22px 0;
  margin-top:24px;
  border-top:1px solid #E8E2D8;
}
.xs-read-nav a{
  display:inline-block;
  padding:0 20px;
  height:38px;
  line-height:36px;
  border:1px solid #E8E2D8;
  border-radius:6px;
  background:#fff;
  font-size:14px;
  color:#333;
  transition:.25s ease;
}
.xs-read-nav a:hover{
  border-color:#C92C2C;
  color:#C92C2C;
  background:#FDF3F3;
}
body.theme-night .xs-read-nav{ border-top-color:#4A4A4A; }
body.theme-night .xs-read-nav a{
  background:#3A3A3A;
  border-color:#4A4A4A;
  color:#999;
}
body.theme-night .xs-read-nav a:hover{
  border-color:#C92C2C;
  color:#E06A6A;
  background:#454545;
}
body.theme-green .xs-read-nav{ border-top-color:#CBD9AC; }
body.theme-green .xs-read-nav a{
  background:#F2F7E6;
  border-color:#CBD9AC;
  color:#3B4A28;
}

/* ------------------------------ 右侧悬浮工具条 ------------------------------ */
.xs-read-side{
  position:fixed;
  right:26px;
  top:180px;
  width:58px;
  padding:8px 0;
  background:#fff;
  border:1px solid #E8E2D8;
  border-radius:29px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  text-align:center;
  z-index:60;
}
.xs-read-side a,
.xs-read-side span{
  display:block;
  padding:9px 0;
  font-size:12px;
  color:#888;
  cursor:pointer;
  transition:.25s ease;
}
.xs-read-side a:hover,
.xs-read-side span:hover{ color:#C92C2C; }
.xs-read-side i{
  display:block;
  font-size:18px;
  line-height:1.3;
}
body.theme-night .xs-read-side{
  background:#3A3A3A;
  border-color:#4A4A4A;
}
body.theme-night .xs-read-side a,
body.theme-night .xs-read-side span{ color:#999; }
body.theme-green .xs-read-side{
  background:#F2F7E6;
  border-color:#CBD9AC;
}
body.theme-green .xs-read-side a,
body.theme-green .xs-read-side span{ color:#6A7A55; }

/* ------------------------------ 阅读设置面板 ------------------------------ */
.xs-read-setting{
  display:none;
  position:fixed;
  right:96px;
  top:180px;
  width:236px;
  padding:16px;
  background:#fff;
  border:1px solid #E8E2D8;
  border-radius:6px;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  z-index:61;
}
.xs-read-setting h4{
  font-size:14px;
  font-weight:600;
  color:#333;
  margin:0 0 10px;
}
.xs-read-setting h4 + h4{ margin-top:16px; }
body.theme-night .xs-read-setting{
  background:#3A3A3A;
  border-color:#4A4A4A;
}
body.theme-night .xs-read-setting h4{ color:#C8C8C8; }
body.theme-green .xs-read-setting{
  background:#F2F7E6;
  border-color:#CBD9AC;
}
body.theme-green .xs-read-setting h4{ color:#3B4A28; }

/* 主题按钮组 */
.xs-theme-list{
  display:flex;
  gap:8px;
}
.xs-theme-list span{
  flex:1 1 0;
  height:30px;
  line-height:28px;
  text-align:center;
  border:1px solid #E8E2D8;
  border-radius:4px;
  cursor:pointer;
  font-size:12px;
  background:#F7F4EE;
  color:#555;
  transition:.25s ease;
}
.xs-theme-list span[data-theme="night"]{ background:#2B2B2B; color:#999; }
.xs-theme-list span[data-theme="green"]{ background:#E3EDCD; color:#3B4A28; }
.xs-theme-list span.on{
  border-color:#C92C2C;
  color:#C92C2C;
  font-weight:600;
  box-shadow:0 0 0 1px #C92C2C inset;
}
body.theme-night .xs-theme-list span{ border-color:#4A4A4A; }
body.theme-green .xs-theme-list span{ border-color:#CBD9AC; }

/* 字号控制 */
.xs-font-ctrl{
  display:flex;
  align-items:center;
  gap:8px;
}
.xs-font-ctrl button{
  width:38px;
  height:30px;
  border:1px solid #E8E2D8;
  background:#fff;
  border-radius:4px;
  cursor:pointer;
  color:#555;
  transition:.25s ease;
}
.xs-font-ctrl button:hover{
  border-color:#C92C2C;
  color:#C92C2C;
}
.xs-font-ctrl b{
  flex:1 1 auto;
  text-align:center;
  font-size:13px;
  color:#555;
}
body.theme-night .xs-font-ctrl button{ background:#454545; border-color:#555; color:#999; }
body.theme-night .xs-font-ctrl b{ color:#999; }
body.theme-green .xs-font-ctrl button{ background:#F2F7E6; border-color:#CBD9AC; color:#3B4A28; }
body.theme-green .xs-font-ctrl b{ color:#3B4A28; }

/* 夜间/护眼主题下的全局元素适配（layout 中的头部与页脚） */
body.theme-night .xs-header{
  background:#3A3A3A;
  border-bottom-color:#4A4A4A;
}
body.theme-night .xs-header a,
body.theme-night .xs-nav a,
body.theme-night .xs-nickname,
body.theme-night .xs-logo{ color:#B8B8B8; }
body.theme-night .xs-nav a:hover{ background:#454545; color:#E06A6A; }
body.theme-night .xs-footer{
  background:#3A3A3A;
  border-top-color:#4A4A4A;
  color:#888;
}
body.theme-night .xs-footer-links a{ color:#888; }
body.theme-night .xs-search input{
  background:#454545;
  border-color:#555;
  color:#CCC;
}
body.theme-green .xs-header{ background:#F2F7E6; border-bottom-color:#CBD9AC; }
body.theme-green .xs-footer{ background:#F2F7E6; border-top-color:#CBD9AC; color:#6A7A55; }

/* ------------------------------ 响应式底线 ------------------------------ */
@media screen and (max-width:1240px){
  .xs-read-wrap{ width:92%; }
  .xs-read-side{ right:8px; }
  .xs-read-setting{ right:76px; }
}
@media screen and (max-width:900px){
  .xs-read-content{ font-size:17px; }
  .xs-read-side{ display:none; }
  .xs-read-setting{ display:none !important; }
}