@charset "utf-8";
/* ==========================================================================
   home.css —— 小说平台前台全站样式
   依据：开发计划书 10.1 设计体系 / 21.12 CSS 变量体系与组件规范
   主色：起点红 #C92C2C；背景：米白纸感 #F7F4EE；圆角 6px
   响应式底线：1366x768 下首页/书库/后台表格不得横向溢出
   ========================================================================== */

/* ------------------------------ 1. 变量体系 ------------------------------ */
:root{
  --xs-red:#C92C2C;
  --xs-red-dark:#A82020;
  --xs-gold:#C9A063;
  --xs-paper:#F7F4EE;
  --xs-card:#FFFFFF;
  --xs-text:#333333;
  --xs-muted:#888888;
  --xs-border:#E8E2D8;
  --xs-radius:6px;
  --xs-shadow:0 2px 8px rgba(0,0,0,.06);
  --xs-gap:16px;
  --xs-green:#E3EDCD;
  --xs-night:#2B2B2B;
}

/* ------------------------------ 2. 基础重置 ------------------------------ */
*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--xs-paper);
  color:var(--xs-text);
  font-family:'Source Han Sans SC','Microsoft YaHei',-apple-system,'PingFang SC',sans-serif;
  font-size:14px;
  line-height:1.6;
}
a{ color:var(--xs-text); text-decoration:none; transition:.25s ease; }
a:hover{ color:var(--xs-red); }
img{ border:0; max-width:100%; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 10px; }
h1,h2,h3,h4{ margin:0; font-weight:600; }
.clearfix:after{ content:''; display:block; clear:both; }

/* ------------------------------ 3. 布局容器 ------------------------------ */
.xs-container{ width:1200px; margin:0 auto; }
.xs-main{ min-height:520px; padding:20px 0 40px; }
.xs-row{ display:flex; flex-wrap:wrap; margin:0 -8px; }
.xs-col{ padding:0 8px; }
.xs-mt10{ margin-top:10px; } .xs-mt20{ margin-top:20px; } .xs-mt30{ margin-top:30px; }
.xs-mb10{ margin-bottom:10px; } .xs-mb20{ margin-bottom:20px; }
.xs-fl{ float:left; } .xs-fr{ float:right; }
.xs-tc{ text-align:center; } .xs-tr{ text-align:right; }
.xs-muted{ color:var(--xs-muted); }
.xs-red{ color:var(--xs-red); }
.xs-gold{ color:var(--xs-gold); }

/* ------------------------------ 4. 顶部导航 ------------------------------ */
.xs-header{
  background:#fff;
  border-bottom:2px solid var(--xs-red);
  box-shadow:var(--xs-shadow);
  position:relative;
  z-index:100;
}
.xs-header-inner{ display:flex; align-items:center; height:64px; }
.xs-logo{
  flex:0 0 auto;
  font-size:24px; font-weight:700;
  color:var(--xs-red);
  letter-spacing:2px;
  margin-right:20px;
}
.xs-logo:hover{ color:var(--xs-red-dark); }
.xs-nav{ flex:1 1 auto; display:flex; flex-wrap:nowrap; overflow:hidden; }
.xs-nav li{ flex:0 0 auto; }
.xs-nav a{
  display:block; padding:0 11px; height:64px; line-height:64px;
  font-size:15px; white-space:nowrap;
}
.xs-nav a:hover{ background:#FDF3F3; color:var(--xs-red); }
.xs-search{ flex:0 0 auto; display:flex; margin:0 14px; }
.xs-search input{
  width:180px; height:34px; padding:0 10px;
  border:1px solid var(--xs-border); border-right:0;
  border-radius:var(--xs-radius) 0 0 var(--xs-radius);
  outline:none; font-size:13px; color:var(--xs-text);
}
.xs-search input:focus{ border-color:var(--xs-red); }
.xs-search button{
  height:34px; border:0; border-radius:0 var(--xs-radius) var(--xs-radius) 0;
  cursor:pointer;
}
.xs-user{ flex:0 0 auto; display:flex; align-items:center; }
.xs-link{ margin-right:10px; font-size:14px; }
.xs-user-box{ position:relative; }
.xs-user-trigger{ display:flex; align-items:center; height:64px; }
.xs-avatar{
  width:34px; height:34px; border-radius:50%;
  object-fit:cover; border:1px solid var(--xs-border); margin-right:8px;
}
.xs-nickname{ max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xs-coin{ color:var(--xs-gold); margin-left:8px; font-size:13px; }
.xs-dot{
  display:inline-block; min-width:16px; height:16px; line-height:16px;
  margin-left:6px; padding:0 4px; border-radius:8px;
  background:var(--xs-red); color:#fff; font-size:11px; font-style:normal; text-align:center;
}
.xs-user-menu{
  display:none; position:absolute; right:0; top:60px; width:130px;
  background:#fff; border:1px solid var(--xs-border); border-radius:var(--xs-radius);
  box-shadow:var(--xs-shadow); overflow:hidden;
}
.xs-user-box:hover .xs-user-menu{ display:block; }
.xs-user-menu a{ display:block; padding:9px 14px; font-size:13px; border-bottom:1px solid #F5F1EA; }
.xs-user-menu a:last-child{ border-bottom:0; }
.xs-user-menu a:hover{ background:#FDF3F3; }

/* ------------------------------ 5. 按钮 ------------------------------ */
.xs-btn-primary,.xs-btn-ghost,.xs-btn-gray{
  display:inline-block; padding:0 18px; height:34px; line-height:34px;
  border-radius:var(--xs-radius); font-size:14px; cursor:pointer;
  border:1px solid transparent; text-align:center; transition:.25s ease;
}
.xs-btn-primary{ background:var(--xs-red); color:#fff; border-color:var(--xs-red); }
.xs-btn-primary:hover{ background:var(--xs-red-dark); border-color:var(--xs-red-dark); color:#fff; }
.xs-btn-ghost{ background:#fff; color:var(--xs-red); border-color:var(--xs-red); }
.xs-btn-ghost:hover{ background:#FDF3F3; color:var(--xs-red-dark); }
.xs-btn-gray{ background:#F2EEE7; color:var(--xs-muted); border-color:var(--xs-border); }
.xs-btn-gray:hover{ background:#EAE5DC; color:var(--xs-muted); }
.xs-btn-sm{ height:28px; line-height:26px; padding:0 12px; font-size:13px; }
.xs-btn-lg{ height:42px; line-height:40px; padding:0 30px; font-size:16px; }
.xs-btn-block{ display:block; width:100%; }

/* ------------------------------ 6. 卡片与区块 ------------------------------ */
.xs-card{
  background:var(--xs-card); border:1px solid var(--xs-border);
  border-radius:var(--xs-radius); box-shadow:var(--xs-shadow);
  padding:18px; margin-bottom:20px;
}
.xs-panel{ background:var(--xs-card); border:1px solid var(--xs-border); border-radius:var(--xs-radius); overflow:hidden; }
.xs-panel-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; height:46px; line-height:46px;
  border-bottom:1px solid var(--xs-border); background:#FCFAF6;
}
.xs-panel-title{ font-size:17px; font-weight:600; color:var(--xs-red); }
.xs-panel-title small{ font-size:12px; color:var(--xs-muted); font-weight:400; margin-left:8px; }
.xs-panel-bd{ padding:16px; }
.xs-panel-more{ font-size:13px; color:var(--xs-muted); }

/* ------------------------------ 7. 状态标签 ------------------------------ */
.xs-tag{
  display:inline-block; padding:1px 7px; border-radius:3px;
  font-size:12px; line-height:18px; vertical-align:middle;
}
.xs-tag-serial{ background:#EAF3FF; color:#2C6FBB; }
.xs-tag-finish{ background:#EAF7EE; color:#2E8B57; }
.xs-tag-vip{ background:#FDECEC; color:var(--xs-red); }
.xs-tag-free{ background:#F2EEE7; color:var(--xs-muted); }
.xs-tag-gold{ background:#FBF3E3; color:#9A7328; }
.xs-tag-draft{ background:#F2EEE7; color:var(--xs-muted); }
.xs-tag-audit{ background:#FFF6E5; color:#C08A00; }

/* ------------------------------ 8. 书籍卡片 ------------------------------ */
.xs-book-card{
  background:#fff; border:1px solid var(--xs-border); border-radius:var(--xs-radius);
  padding:12px; transition:.25s ease; height:100%;
}
.xs-book-card:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.10); }
.xs-book-card .xs-cover{
  display:block; position:relative; width:100%;
  padding-top:133.33%; /* 3:4 */
  background:#F2EEE7; border-radius:4px; overflow:hidden;
}
.xs-book-card .xs-cover img{
  position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;
}
.xs-book-card .xs-cover .xs-tag{ position:absolute; top:6px; right:6px; }
.xs-book-card .xs-cover .xs-tag + .xs-tag{ top:28px; }
.xs-book-meta{ padding-top:10px; }
.xs-book-title{
  display:block; font-size:15px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.xs-book-author{ color:var(--xs-muted); font-size:13px; margin:4px 0; }
.xs-book-summary{
  color:var(--xs-muted); font-size:12px; line-height:1.6; margin:0 0 6px;
  height:38px; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.xs-book-stat{ color:var(--xs-muted); font-size:12px; margin:0; }
.xs-book-stat em{ color:var(--xs-red); font-style:normal; }

/* 卡片矩阵（主编推荐 6 卡 / 热门完本 5 卡） */
.xs-book-grid{ display:flex; flex-wrap:wrap; margin:0 -8px; }
.xs-book-grid .xs-grid-item{ width:16.666%; padding:0 8px 16px; }
.xs-book-grid.cols5 .xs-grid-item{ width:20%; }
.xs-book-grid.cols4 .xs-grid-item{ width:25%; }
.xs-book-grid.cols3 .xs-grid-item{ width:33.3333%; }
.xs-book-grid.cols2 .xs-grid-item{ width:50%; }

/* ------------------------------ 9. 排行榜 ------------------------------ */
.xs-rank-item{
  display:flex; align-items:center; padding:9px 4px;
  border-bottom:1px dashed var(--xs-border);
}
.xs-rank-item:last-child{ border-bottom:0; }
.xs-rank-no{
  flex:0 0 26px; width:26px; height:26px; line-height:26px; text-align:center;
  border-radius:4px; background:#F2EEE7; color:var(--xs-muted);
  font-size:13px; font-weight:600; margin-right:10px;
}
.xs-rank-item.top1 .xs-rank-no{ background:var(--xs-red); color:#fff; }
.xs-rank-item.top2 .xs-rank-no{ background:var(--xs-gold); color:#fff; }
.xs-rank-item.top3 .xs-rank-no{ background:#D9B77A; color:#fff; }
.xs-rank-info{ flex:1 1 auto; min-width:0; }
.xs-rank-title{
  font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.xs-rank-desc{ font-size:12px; color:var(--xs-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xs-rank-num{ flex:0 0 auto; margin-left:10px; font-size:13px; color:var(--xs-red); }

/* 榜单前三名带封面的大卡 */
.xs-rank-top{ display:flex; gap:14px; padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--xs-border); }
.xs-rank-top-item{ flex:1 1 0; display:flex; gap:10px; min-width:0; }
/* [V1.0.1] 21.12 要求"前三名数字红/金强调"：原样式只写了 .xs-rank-item.top1~3，
   而前三名实际渲染在 .xs-rank-top-item 中（不在 <ul> 列表内），导致强调从未生效。
   此处补齐前三名大卡上的徽标配色。 */
.xs-rank-top-item.top1 .xs-badge-no{ background:var(--xs-red); color:#fff; }
.xs-rank-top-item.top2 .xs-badge-no{ background:var(--xs-gold); color:#fff; }
.xs-rank-top-item.top3 .xs-badge-no{ background:#D9B77A; color:#fff; }
.xs-rank-item.top1 .xs-rank-no{ background:var(--xs-red); color:#fff; }
.xs-rank-item.top2 .xs-rank-no{ background:var(--xs-gold); color:#fff; }
.xs-rank-item.top3 .xs-rank-no{ background:#D9B77A; color:#fff; }
.xs-rank-top-item .xs-cover{
  flex:0 0 74px; width:74px; height:99px; border-radius:4px; overflow:hidden; background:#F2EEE7;
}
.xs-rank-top-item .xs-cover img{ width:100%; height:100%; object-fit:cover; }
.xs-rank-top-meta{ min-width:0; }
.xs-rank-top-meta .xs-book-title{ font-size:14px; }
.xs-badge-no{
  display:inline-block; width:18px; height:18px; line-height:18px; text-align:center;
  border-radius:3px; background:var(--xs-red); color:#fff; font-size:11px; margin-right:5px;
}

/* ------------------------------ 10. 榜单 Tab ------------------------------ */
.xs-tabs{ display:flex; border-bottom:1px solid var(--xs-border); }
.xs-tabs li{ margin-right:4px; }
.xs-tabs a{
  display:block; padding:0 18px; height:42px; line-height:42px;
  font-size:15px; border-bottom:2px solid transparent;
}
.xs-tabs a.on,.xs-tabs a:hover{ color:var(--xs-red); border-bottom-color:var(--xs-red); font-weight:600; }
.xs-tab-pane{ display:none; padding-top:14px; }
.xs-tab-pane.on{ display:block; }

/* ------------------------------ 11. 首页专用 ------------------------------ */
.xs-home-top{ display:flex; gap:20px; margin-bottom:20px; }
.xs-banner{ flex:0 0 780px; width:780px; }
.xs-banner .layui-carousel{ border-radius:var(--xs-radius); overflow:hidden; }
.xs-banner-img{ display:block; width:100%; height:100%; object-fit:cover; }
.xs-top-recommend{ flex:1 1 auto; min-width:0; }
.xs-top-recommend .xs-cover{ height:150px; border-radius:4px; overflow:hidden; background:#F2EEE7; }
.xs-top-recommend .xs-cover img{ width:100%; height:100%; object-fit:cover; }
.xs-newbook-item{ display:flex; align-items:center; padding:9px 0; border-bottom:1px dashed var(--xs-border); }
.xs-newbook-item:last-child{ border-bottom:0; }
.xs-newbook-title{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xs-newbook-meta{ flex:0 0 auto; color:var(--xs-muted); font-size:12px; margin-left:12px; }
.xs-newbook-meta a{ color:var(--xs-muted); }
.xs-newbook-meta a:hover{ color:var(--xs-red); }

/* ------------------------------ 12. 筛选条（书库） ------------------------------ */
.xs-filter{ background:#fff; border:1px solid var(--xs-border); border-radius:var(--xs-radius); padding:6px 16px; }
.xs-filter-row{ display:flex; padding:9px 0; border-bottom:1px dashed var(--xs-border); }
.xs-filter-row:last-child{ border-bottom:0; }
.xs-filter-label{ flex:0 0 76px; color:var(--xs-muted); }
.xs-filter-opts{ flex:1 1 auto; display:flex; flex-wrap:wrap; }
.xs-filter-opts a{
  display:inline-block; padding:1px 12px; margin:0 8px 4px 0;
  border-radius:14px; font-size:13px;
}
.xs-filter-opts a.on{ background:var(--xs-red); color:#fff; }
.xs-filter-opts a:hover{ background:#FDF3F3; color:var(--xs-red); }
.xs-filter-opts a.on:hover{ background:var(--xs-red-dark); color:#fff; }
.xs-list-item{ display:flex; gap:16px; padding:18px; background:#fff; border:1px solid var(--xs-border); border-radius:var(--xs-radius); margin-bottom:14px; }
.xs-list-item .xs-cover{ flex:0 0 108px; width:108px; height:144px; border-radius:4px; overflow:hidden; background:#F2EEE7; position:relative; }
.xs-list-item .xs-cover img{ width:100%; height:100%; object-fit:cover; }
.xs-list-info{ flex:1 1 auto; min-width:0; }
.xs-list-info .xs-book-title{ font-size:18px; }
.xs-list-info .xs-book-summary{ height:auto; -webkit-line-clamp:2; font-size:13px; margin:8px 0; }
.xs-list-stat{ display:flex; flex-wrap:wrap; gap:18px; color:var(--xs-muted); font-size:13px; }

/* ------------------------------ 13. 详情页 ------------------------------ */
.xs-detail-top{ display:flex; gap:24px; background:#fff; border:1px solid var(--xs-border); border-radius:var(--xs-radius); padding:22px; }
.xs-detail-cover{ flex:0 0 180px; width:180px; height:240px; border-radius:4px; overflow:hidden; background:#F2EEE7; position:relative; }
.xs-detail-cover img{ width:100%; height:100%; object-fit:cover; }
.xs-detail-info{ flex:1 1 auto; min-width:0; }
.xs-detail-info h1{ font-size:26px; margin-bottom:10px; }
.xs-detail-meta{ display:flex; flex-wrap:wrap; gap:22px; color:var(--xs-muted); font-size:13px; margin-bottom:12px; }
.xs-detail-summary{ color:#555; font-size:13px; line-height:1.8; margin-bottom:16px; max-height:76px; overflow:hidden; }
.xs-detail-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.xs-detail-stat{ display:flex; gap:30px; margin-top:16px; padding-top:14px; border-top:1px dashed var(--xs-border); }
.xs-detail-stat div{ text-align:center; }
.xs-detail-stat b{ display:block; font-size:19px; color:var(--xs-red); }
.xs-detail-stat span{ color:var(--xs-muted); font-size:12px; }

/* 目录列表（详情页前 20 章） */
.xs-dir-list{ display:flex; flex-wrap:wrap; margin:0 -6px; }
.xs-dir-list li{ width:50%; padding:0 6px; }
.xs-dir-list a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px; border-bottom:1px dashed var(--xs-border); font-size:13px;
}
.xs-dir-list a span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xs-dir-cols3 li{ width:33.3333%; }
.xs-dir-cols1 li{ width:100%; }

/* ------------------------------ 14. 阅读页 ------------------------------ */
body.xs-read-page{ background:var(--xs-paper); }
.xs-read-wrap{ width:860px; margin:0 auto; }
.xs-read-crumb{ padding:14px 0; color:var(--xs-muted); font-size:13px; }
.xs-read-toolbar{ display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:2px solid var(--xs-red); }
.xs-read-title{ font-size:22px; }
.xs-read-meta{ color:var(--xs-muted); font-size:13px; }
.xs-read-content{
  max-width:800px; margin:26px auto; line-height:2; font-size:18px;
  color:#333; word-wrap:break-word; overflow-wrap:break-word;
}
.xs-read-content p{ margin:0 0 1em; text-indent:2em; }
.xs-read-content img{ max-width:100%; }
.xs-read-nav{
  display:flex; align-items:center; justify-content:center; gap:22px;
  padding:22px 0; border-top:1px solid var(--xs-border); margin-top:24px;
}
.xs-read-nav a{ padding:0 18px; height:36px; line-height:34px; border:1px solid var(--xs-border); border-radius:var(--xs-radius); background:#fff; }
.xs-read-nav a:hover{ border-color:var(--xs-red); }
.xs-read-vip{ background:#fff; border:1px solid var(--xs-border); border-radius:var(--xs-radius); padding:40px 20px; text-align:center; margin:26px 0; }
.xs-read-vip .layui-icon{ font-size:44px; color:var(--xs-gold); }
.xs-read-vip h3{ margin:14px 0 8px; font-size:19px; }
.xs-read-vip p{ color:var(--xs-muted); }
.xs-read-side{
  position:fixed; right:26px; top:180px; width:56px;
  background:#fff; border:1px solid var(--xs-border); border-radius:28px;
  box-shadow:var(--xs-shadow); padding:8px 0; text-align:center; z-index:60;
}
.xs-read-side a,.xs-read-side span{
  display:block; padding:9px 0; font-size:12px; color:var(--xs-muted); cursor:pointer;
}
.xs-read-side a:hover,.xs-read-side span:hover{ color:var(--xs-red); }
.xs-read-side i{ display:block; font-size:18px; }
.xs-read-setting{ display:none; position:fixed; right:96px; top:180px; width:230px; background:#fff; border:1px solid var(--xs-border); border-radius:var(--xs-radius); box-shadow:0 6px 20px rgba(0,0,0,.12); padding:16px; z-index:61; }
.xs-read-setting h4{ font-size:14px; margin-bottom:10px; }
.xs-theme-list{ display:flex; gap:8px; margin-bottom:14px; }
.xs-theme-list span{ flex:1 1 0; height:30px; line-height:28px; text-align:center; border:1px solid var(--xs-border); border-radius:4px; cursor:pointer; font-size:12px; }
.xs-theme-list span.on{ border-color:var(--xs-red); color:var(--xs-red); }
.xs-font-ctrl{ display:flex; align-items:center; gap:8px; }
.xs-font-ctrl button{ width:34px; height:30px; border:1px solid var(--xs-border); background:#fff; border-radius:4px; cursor:pointer; }
.xs-font-ctrl button:hover{ border-color:var(--xs-red); color:var(--xs-red); }
.xs-font-ctrl b{ flex:1 1 auto; text-align:center; }

/* 阅读三主题 */
body.theme-night{ background:var(--xs-night); color:#999; }
body.theme-night .xs-read-content,body.theme-night .xs-read-title{ color:#999; }
body.theme-night .xs-read-nav a,body.theme-night .xs-read-side,
body.theme-night .xs-read-setting,body.theme-night .xs-card{ background:#3A3A3A; border-color:#4A4A4A; color:#999; }
body.theme-night a{ color:#999; }
body.theme-night .xs-header{ background:#3A3A3A; border-bottom-color:#4A4A4A; }
body.theme-night .xs-nav a:hover{ background:#454545; }
body.theme-green{ background:var(--xs-green); }
body.theme-green .xs-read-content,body.theme-green .xs-read-title{ color:#3B4A28; }

/* ------------------------------ 15. 表单 ------------------------------ */
.xs-form{ max-width:460px; margin:0 auto; }
.xs-form-wide{ max-width:760px; }
.xs-form-item{ margin-bottom:16px; }
.xs-form-item label{ display:block; margin-bottom:6px; font-size:13px; color:#555; }
.xs-form-item .xs-req:after{ content:' *'; color:var(--xs-red); }
.xs-input,.xs-textarea,.xs-select{
  width:100%; padding:0 12px; height:38px; line-height:36px;
  border:1px solid var(--xs-border); border-radius:var(--xs-radius);
  background:#fff; font-size:14px; color:var(--xs-text); outline:none;
  font-family:inherit;
}
.xs-textarea{ height:auto; min-height:110px; line-height:1.7; padding:10px 12px; resize:vertical; }
.xs-input:focus,.xs-textarea:focus,.xs-select:focus{ border-color:var(--xs-red); }
.xs-input-tip{ color:var(--xs-muted); font-size:12px; margin-top:4px; }
.xs-form-actions{ margin-top:22px; }
.xs-radio-group{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.xs-radio-group label{ display:inline-flex; align-items:center; gap:5px; margin:0; cursor:pointer; }
.xs-auth-box{ width:420px; margin:50px auto; background:#fff; border:1px solid var(--xs-border); border-radius:var(--xs-radius); padding:30px 34px; box-shadow:var(--xs-shadow); }
.xs-auth-box h2{ text-align:center; font-size:22px; margin-bottom:22px; color:var(--xs-red); }
.xs-auth-box .xs-btn-primary{ width:100%; height:40px; line-height:38px; font-size:16px; }
.xs-auth-foot{ text-align:center; margin-top:16px; font-size:13px; color:var(--xs-muted); }

/* ------------------------------ 16. 个人中心 / 写作专区 ------------------------------ */
.xs-center-wrap{ display:flex; gap:20px; }
.xs-side-menu{ flex:0 0 190px; }
.xs-side-menu .xs-panel-bd{ padding:6px 0; }
.xs-side-menu a{ display:block; padding:11px 18px; font-size:14px; border-left:3px solid transparent; }
.xs-side-menu a.on{ background:#FDF3F3; color:var(--xs-red); border-left-color:var(--xs-red); font-weight:600; }
.xs-side-menu a:hover{ background:#FDF3F3; }
.xs-center-body{ flex:1 1 auto; min-width:0; }
.xs-stat-grid{ display:flex; flex-wrap:wrap; margin:0 -8px; }
.xs-stat-card{
  flex:1 1 0; min-width:150px; margin:0 8px 14px; padding:18px;
  background:#fff; border:1px solid var(--xs-border); border-radius:var(--xs-radius); text-align:center;
}
.xs-stat-card b{ display:block; font-size:24px; color:var(--xs-red); }
.xs-stat-card span{ color:var(--xs-muted); font-size:13px; }

/* ------------------------------ 17. 消息 / 账单列表 ------------------------------ */
.xs-msg-item{ display:flex; gap:12px; padding:14px 0; border-bottom:1px dashed var(--xs-border); }
.xs-msg-item:last-child{ border-bottom:0; }
.xs-msg-icon{
  flex:0 0 36px; width:36px; height:36px; line-height:36px; text-align:center;
  border-radius:50%; background:#FDF3F3; color:var(--xs-red);
}
.xs-msg-body{ flex:1 1 auto; min-width:0; }
.xs-msg-title{ font-size:14px; font-weight:600; }
.xs-msg-title .xs-unread{ display:inline-block; width:7px; height:7px; background:var(--xs-red); border-radius:50%; margin-right:6px; vertical-align:middle; }
.xs-msg-content{ color:#666; font-size:13px; margin:4px 0 0; word-break:break-all; }
.xs-msg-time{ flex:0 0 auto; color:var(--xs-muted); font-size:12px; }
.xs-bill-item{ display:flex; align-items:center; padding:13px 0; border-bottom:1px dashed var(--xs-border); }
.xs-bill-item:last-child{ border-bottom:0; }
.xs-bill-type{ flex:0 0 110px; }
.xs-bill-remark{ flex:1 1 auto; min-width:0; color:#666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xs-bill-coin{ flex:0 0 110px; text-align:right; font-weight:600; }
.xs-bill-coin.plus{ color:#2E8B57; }
.xs-bill-coin.minus{ color:var(--xs-red); }
.xs-bill-balance{ flex:0 0 110px; text-align:right; color:var(--xs-muted); font-size:12px; }
.xs-bill-time{ flex:0 0 120px; text-align:right; color:var(--xs-muted); font-size:12px; }

/* ------------------------------ 18. 评论 ------------------------------ */
.xs-cmt-item{ display:flex; gap:12px; padding:16px 0; border-bottom:1px dashed var(--xs-border); }
.xs-cmt-item:last-child{ border-bottom:0; }
.xs-cmt-avatar{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; overflow:hidden; background:#F2EEE7; }
.xs-cmt-avatar img{ width:100%; height:100%; object-fit:cover; }
.xs-cmt-body{ flex:1 1 auto; min-width:0; }
.xs-cmt-head{ display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.xs-cmt-name{ font-weight:600; font-size:13px; }
.xs-cmt-time{ color:var(--xs-muted); font-size:12px; }
.xs-cmt-text{ font-size:14px; color:#444; word-break:break-word; }
.xs-cmt-foot{ display:flex; gap:16px; margin-top:7px; color:var(--xs-muted); font-size:12px; }
.xs-cmt-foot a{ color:var(--xs-muted); cursor:pointer; }
.xs-cmt-foot a:hover{ color:var(--xs-red); }
.xs-cmt-reply{ margin-top:10px; padding:10px 12px; background:#FAF8F4; border-radius:var(--xs-radius); }
.xs-cmt-reply .xs-cmt-item{ padding:8px 0; border-bottom:0; }
.xs-star{ color:var(--xs-gold); font-size:13px; letter-spacing:1px; }

/* ------------------------------ 19. 分页 ------------------------------ */
.xs-page{ margin-top:26px; text-align:center; }
.xs-page .pagination{ display:inline-block; }
.xs-page .pagination li{ display:inline-block; margin:0 3px; }
.xs-page .pagination li a,.xs-page .pagination li span{
  display:inline-block; min-width:34px; height:34px; line-height:32px; padding:0 10px;
  border:1px solid var(--xs-border); border-radius:var(--xs-radius);
  background:#fff; font-size:13px; text-align:center;
}
.xs-page .pagination li.active span{ background:var(--xs-red); border-color:var(--xs-red); color:#fff; }
.xs-page .pagination li a:hover{ border-color:var(--xs-red); color:var(--xs-red); }
.xs-page .pagination li.disabled span{ color:#CCC; }

/* ------------------------------ 20. 空态 ------------------------------ */
.xs-empty{ padding:60px 20px; text-align:center; color:var(--xs-muted); }
.xs-empty .layui-icon{ font-size:52px; color:#D8D1C6; }
.xs-empty p{ margin:14px 0 18px; }

/* ------------------------------ 21. 弹层内容 ------------------------------ */
.xs-layer-body{ padding:20px 22px; }
.xs-layer-body .xs-form-item:last-child{ margin-bottom:0; }
.xs-reward-opts{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.xs-reward-opts span{
  padding:8px 14px; border:1px solid var(--xs-border); border-radius:var(--xs-radius);
  cursor:pointer; font-size:13px; background:#fff;
}
.xs-reward-opts span.on{ border-color:var(--xs-red); color:var(--xs-red); background:#FDF3F3; }

/* ------------------------------ 22. 页脚 ------------------------------ */
.xs-footer{ background:#fff; border-top:1px solid var(--xs-border); padding:24px 0; text-align:center; color:var(--xs-muted); font-size:13px; }
.xs-footer-links a{ margin:0 10px; color:var(--xs-muted); }
.xs-footer-links a:hover{ color:var(--xs-red); }
.xs-footer-icp,.xs-footer-copy{ margin:8px 0 0; }

/* ------------------------------ 23. 工具类 ------------------------------ */
.xs-ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xs-break{ word-break:break-all; }
.xs-hide{ display:none !important; }
.xs-inline{ display:inline-block; }
.xs-vmid{ vertical-align:middle; }

/* ------------------------------ 24. 响应式底线 ------------------------------ */
@media screen and (max-width:1240px){
  .xs-container{ width:96%; }
  .xs-banner{ flex:1 1 auto; width:auto; }
  .xs-book-grid .xs-grid-item{ width:25%; }
  .xs-book-grid.cols5 .xs-grid-item{ width:25%; }
  .xs-read-wrap{ width:92%; }
  .xs-read-side{ right:8px; }
}
@media screen and (max-width:900px){
  .xs-home-top{ flex-wrap:wrap; }
  .xs-book-grid .xs-grid-item,.xs-book-grid.cols5 .xs-grid-item{ width:33.3333%; }
  .xs-center-wrap{ flex-wrap:wrap; }
  .xs-side-menu{ flex:1 1 100%; }
  .xs-detail-top{ flex-wrap:wrap; }
}