/* 527che.com — layui 2.9 之上的站点皮肤
 * 只做三件事：定主色/字级、把 layui 的卡片拼成阅读站布局、压住移动端。
 * 结构类名（layui-card / layui-btn / layui-container / layui-input）全部沿用 layui 原件。
 */

:root{
  --pri:#1e9fff;
  --pri-d:#0c7fe0;
  --txt:#1f2329;
  --txt-2:#4e5969;
  --sub:#86909c;
  --line:#e8eaee;
  --bg:#f2f3f5;
  --radius:8px;
}

/* 主色统一到 layui 蓝 */
.layui-btn{background-color:var(--pri);border-color:var(--pri)}
.layui-btn:hover{background-color:var(--pri-d);border-color:var(--pri-d);opacity:1}
.layui-btn-primary{background-color:#fff;border-color:#d2d5db;color:var(--txt-2)}
.layui-btn-primary:hover{background-color:#f7f9fc;border-color:var(--pri);color:var(--pri)}
.layui-btn-disabled,.layui-btn-disabled:hover{background-color:#f5f6f8;border-color:#e6e8eb;color:#b4b8bf;opacity:1}
.layui-btn-radius{border-radius:20px}
a{color:var(--pri)}
a:hover{color:var(--pri-d)}

body{background:var(--bg);color:var(--txt);
  font:15px/1.7 -apple-system,"PingFang SC","Microsoft YaHei",system-ui,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}

/* ---------------------------------------------------------------- 头部 */
.site-head{background:#fff;box-shadow:0 1px 4px rgba(31,35,41,.06);position:sticky;top:0;z-index:50}
.head-row{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:7px;font-size:20px;font-weight:700;color:var(--pri);white-space:nowrap}
.brand .layui-icon{font-size:22px}
.brand:hover{color:var(--pri-d)}
.head-search{display:flex;flex:1;max-width:420px;margin-left:auto}
.head-search .layui-input{height:36px;border-right:0;border-radius:18px 0 0 18px;padding-left:14px;background:#f7f9fc}
.head-search .layui-input:focus{background:#fff;border-color:var(--pri)}
.head-search .layui-btn{height:36px;border-radius:0 18px 18px 0;padding:0 16px}
.head-search .layui-btn .layui-icon{font-size:16px}

.site-nav{background:#fff;border-top:1px solid #f3f4f6}
.nav-scroll{display:flex;gap:4px;overflow-x:auto;padding:0 0 0;scrollbar-width:none}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-scroll a{position:relative;display:block;padding:11px 12px;font-size:14.5px;color:var(--txt-2);white-space:nowrap}
.nav-scroll a:hover{color:var(--pri)}
.nav-scroll a.on{color:var(--pri);font-weight:600}
.nav-scroll a.on:after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:var(--pri)}

/* ---------------------------------------------------------------- 布局 */
.layui-container{width:auto;max-width:1160px;padding:0 14px;margin:0 auto}
.page-main{padding-top:14px}
.home-hd{margin:16px 0 4px}
.home-hd h1{font-size:19px;font-weight:700;margin:0}
.home-hd p{margin:3px 0 0;font-size:13px;color:var(--sub)}
.page-h1{font-size:19px;font-weight:700;margin:16px 0 4px}

.layui-card{border-radius:var(--radius);box-shadow:0 1px 3px rgba(31,35,41,.05);margin-bottom:14px}
.layui-card-header{height:auto;line-height:1.4;margin:0;padding:13px 16px;border-bottom:1px solid #f3f4f6;font-size:15px;font-weight:600;color:var(--txt)}
.layui-card-header .layui-icon{color:var(--pri)}
.sec-head{position:relative;padding-left:15px}
.sec-head:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:15px;border-radius:2px;background:var(--pri)}
.sec-head em{margin-left:8px;font-style:normal;font-weight:400;font-size:12.5px;color:var(--sub)}
.layui-card-body{padding:13px 16px}

/* ------------------------------------------------------------ 书目列表 */
.bk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 12px}
.bk-item{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:6px;color:var(--txt);min-width:0}
.bk-item:hover{background:#f2f7ff;color:var(--pri)}
.bk-cat{flex:0 0 auto;font-size:12px;color:var(--pri);background:#eaf4ff;border-radius:3px;padding:1px 5px;line-height:1.6}
.bk-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px}
.bk-item:hover .bk-name{color:var(--pri)}
.bk-author{flex:0 0 auto;max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--sub)}

/* -------------------------------------------------------------- 书页 */
.book-hero{display:flex;gap:16px;align-items:flex-start}
.book-cover{flex:0 0 auto;width:96px;border-radius:6px;overflow:hidden;background:#eef1f5;box-shadow:0 2px 8px rgba(31,35,41,.12)}
.book-cover img{display:block;width:96px;height:128px;object-fit:cover}
.book-info{flex:1;min-width:0}
.book-info h1{font-size:20px;font-weight:700;margin:0 0 8px;line-height:1.35}
.book-meta{margin:0 0 4px;font-size:13.5px;color:var(--txt-2)}
.book-meta span{color:var(--txt)}
.book-meta i{margin:0 7px;color:#d2d5db;font-style:normal}
.read-btn{margin-top:9px;padding:0 22px;height:36px;line-height:36px}

.ch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px 12px}
.ch-item{padding:7px 10px;border-radius:6px;font-size:14px;color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-item:hover{background:#f2f7ff;color:var(--pri)}

.intro{font-size:14.5px;line-height:1.95;color:var(--txt-2)}

/* -------------------------------------------------------------- 阅读页 */
.read-wrap{max-width:820px;margin:0 auto}
.read{border-radius:var(--radius)}
.read .layui-card-body{padding:20px 26px 26px}
.read-title{font-size:21px;font-weight:700;line-height:1.45;margin:6px 0 8px;text-align:center}
.read-meta{text-align:center;font-size:13px;color:var(--sub);margin:0 0 18px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.read-meta a{color:var(--pri)}
.read-meta i{margin:0 7px;color:#d8dbe0;font-style:normal}
.read-body{font-size:17px;line-height:2.05;color:#2b2f36;letter-spacing:.2px}
.read-body p{margin:0 0 17px;text-indent:2em}
.read-body p:last-child{margin-bottom:0}
.read-nav{display:flex;gap:10px;justify-content:center;padding:0 0 6px}
.read-nav .layui-btn{height:38px;line-height:38px;padding:0 18px;border-radius:19px}
.read-nav .layui-btn .layui-icon{font-size:14px}

/* -------------------------------------------------------------- 其它 */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:12.5px;color:var(--sub);margin:12px 0 2px}
.crumbs .layui-icon{font-size:13px}
.crumbs a{color:var(--sub)}
.crumbs a:hover{color:var(--pri)}
.crumbs .cur{color:var(--txt-2);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 4px}
.pager .layui-btn{margin:0}

.empty{padding:36px 16px;text-align:center;color:var(--sub)}

.site-foot{margin:26px 0 0;padding:22px 0 34px;background:#fff;border-top:1px solid var(--line);text-align:center}
.foot-note{margin:0 0 6px;font-size:12.5px;color:var(--sub)}
.foot-links a{color:var(--txt-2)}
.foot-links a:hover{color:var(--pri)}
.foot-links span{margin:0 6px;color:#d8dbe0}

/* ------------------------------------------------------------ 移动端 */
@media (max-width:992px){
  .bk-grid,.ch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .head-row{height:56px;gap:10px}
  .brand{font-size:18px}
  .brand .layui-icon{display:none}
  .head-search{max-width:none}
  .bk-grid{grid-template-columns:1fr}
  .ch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .read .layui-card-body{padding:16px 16px 20px}
  .read-body{font-size:16.5px;line-height:2}
  .book-info h1{font-size:18px}
  .crumbs{font-size:12px}
  .read-nav{flex-wrap:wrap}
  .read-nav .layui-btn{flex:1;padding:0 10px}
}
@media (max-width:420px){
  .ch-grid{grid-template-columns:1fr}
  .bk-author{display:none}
}