/* ============================================================
   qlyw.cn 首页强化皮肤 —— home-v2
   version: 1.0   (2026-09-22)
   加载方式：由首页模板 application/index/view/index/index.html
            的自有 <style> 之后引入（后加载 → 覆盖首页模板内嵌样式）
   作用域：仅首页引用，不注入任何其他页面
   设计令牌与 inner-v2 / restyle-v2 同源（青绿 #0e9e8e / #2fc4ae）
   原则：只做视觉层（配色/圆角/阴影/字号/间距/触控区），不改 DOM 与功能
   ============================================================ */

/* ---------- ① 设计令牌 ---------- */
:root{
  --h-brand:#0e9e8e;
  --h-brand2:#2fc4ae;
  --h-grad:linear-gradient(135deg,#0e9e8e,#2fc4ae);
  --h-brand-light:#e3f7f4;
  --h-ink:#17222b;
  --h-ink2:#5b6b77;
  --h-ink3:#93a1ab;
  --h-line:#e8eef1;
  --h-soft:#f7fafb;
  --h-card:#ffffff;
  --h-radius:18px;
  --h-shadow:0 2px 12px rgba(23,34,43,.05);
}

/* ---------- ② 全局基调 ---------- */
body{background:#f4f7f8 !important;color:var(--h-ink);}
::selection{background:rgba(14,158,142,.18);}

/* 顶部日期/语言条：移动端收起，桌面弱化 */
.top{background:#fff !important;border-bottom:1px solid var(--h-line) !important;}
.top,.top a{color:var(--h-ink3) !important;font-size:12.5px !important;}

/* ---------- ③ 主导航（桌面） ---------- */
nav.layui-bg-white{
  position:sticky;top:0;z-index:998;
  background:rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--h-line) !important;
  box-shadow:0 1px 0 var(--h-line) !important;
}
nav .layui-nav{background:transparent !important;border-bottom:none !important;}
nav .layui-nav .layui-nav-item a{
  color:var(--h-ink2) !important;
  font-weight:500 !important;font-size:14.5px !important;
  border-radius:999px;padding:0 14px !important;
  transition:color .15s ease,background .15s ease;
}
nav .layui-nav .layui-nav-item a:hover,
nav .layui-nav .layui-nav-item a.font-black{color:var(--h-brand) !important;background:var(--h-brand-light);}

/* ---------- ④ 移动端分类条（横向滚动 chips） ---------- */
.top-head{
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:#fff;border-bottom:1px solid var(--h-line);
}
.top-head::-webkit-scrollbar{display:none;}
.top-head ul{display:flex !important;flex-wrap:nowrap !important;white-space:nowrap;gap:8px;padding:10px 0 !important;}
.top-head ul li{flex:0 0 auto;}
.top-head ul li a{
  display:inline-block;min-height:36px;line-height:20px;
  padding:8px 16px !important;
  border-radius:999px !important;
  background:#fff !important;border:1px solid var(--h-line) !important;
  color:var(--h-ink2) !important;font-size:13.5px !important;
  transition:all .15s ease;
}
.top-head ul li a:active{color:var(--h-brand) !important;border-color:var(--h-brand) !important;background:var(--h-brand-light) !important;}

/* ---------- ⑤ 搜索区（banner） ---------- */
.banner{
  background:linear-gradient(180deg,#f2fbf9 0%,#ffffff 62%) !important;
  border:1px solid var(--h-line) !important;
  border-radius:20px !important;
  padding:22px 16px 18px !important;
  box-shadow:var(--h-shadow) !important;
  margin-bottom:16px !important;
}
.banner .layui-font-24,
.banner .m-b-xs{font-size:13.5px !important;color:var(--h-ink2) !important;line-height:1.65 !important;font-weight:400 !important;}
.banner h1{
  display:block;margin:0 0 8px !important;
  font-size:25px !important;font-weight:800 !important;
  letter-spacing:.3px;line-height:1.25 !important;
  color:var(--h-ink) !important;
}
@supports (-webkit-background-clip:text){
  .banner h1{
    background:var(--h-grad) !important;
    -webkit-background-clip:text !important;background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
  }
}

/* 搜索类型 chips */
.search-type{
  gap:9px !important;padding:12px 0 14px !important;margin:0 -16px 14px !important;
  scrollbar-width:none;
}
.search-type::-webkit-scrollbar{display:none;}
.search-type li{
  min-height:36px;
  padding:8px 15px !important;
  background:#fff !important;border:1px solid var(--h-line) !important;
  border-radius:999px !important;
  color:var(--h-ink2) !important;font-size:13.5px !important;font-weight:500;
  transition:all .15s ease;
}
.search-type li img{width:18px !important;height:18px !important;border-radius:6px !important;margin-right:7px !important;}
.search-type li:hover{border-color:var(--h-brand) !important;color:var(--h-brand) !important;}
.search-type li.active{
  background:var(--h-grad) !important;border-color:transparent !important;
  color:#fff !important;box-shadow:0 4px 12px rgba(14,158,142,.28);
}
.search-type li.active img{background:#fff;padding:2px;border-radius:5px !important;}

/* ---------- ⑥ 搜索输入框 + 查询按钮 ---------- */
.search-main{gap:10px !important;align-items:stretch;}
.search-main .layui-input{
  flex:1;min-width:0;
  height:52px !important;line-height:52px !important;
  padding:0 18px !important;
  border-radius:14px !important;
  border:1px solid var(--h-line) !important;
  background:var(--h-soft) !important;
  color:var(--h-ink) !important;font-size:15px !important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.search-main .layui-input:focus{
  border-color:var(--h-brand) !important;background:#fff !important;
  box-shadow:0 0 0 3px rgba(14,158,142,.12) !important;
}
.search-main .layui-btn,
.search-main .layui-btn.layui-btn-primary{
  flex-shrink:0;
  height:52px !important;line-height:52px !important;
  padding:0 26px !important;
  border-radius:14px !important;
  border:none !important;
  background:var(--h-grad) !important;
  color:#fff !important;font-size:15.5px !important;font-weight:600 !important;
  box-shadow:0 6px 16px rgba(14,158,142,.25);
}
.search-main .layui-btn:active{transform:translateY(1px);}

/* ---------- ⑦ 最近使用 chips ---------- */
.m-tb-sm .ah,
.ah{
  display:inline-block;
  padding:7px 15px !important;margin:0 8px 10px 0 !important;
  border-radius:999px !important;
  background:#fff !important;border:1px solid var(--h-line) !important;
  color:var(--h-ink2) !important;font-size:13px !important;
  transition:all .15s ease;
}
.m-tb-sm .ah:hover,
.ah:hover{color:var(--h-brand) !important;border-color:var(--h-brand) !important;background:var(--h-brand-light) !important;}
.m-tb-sm .text-light,.text-light{color:var(--h-ink3) !important;font-size:13px;}

/* ---------- ⑧ 卡片 ---------- */
.layui-card{
  background:var(--h-card) !important;
  border:1px solid var(--h-line) !important;
  border-radius:var(--h-radius) !important;
  box-shadow:var(--h-shadow) !important;
  margin-bottom:16px !important;
  overflow:hidden;
}
.layui-card-header{
  padding:16px 18px !important;
  background:#fff !important;
  border-bottom:1px solid var(--h-line) !important;
  color:var(--h-ink) !important;
  font-size:18px !important;font-weight:700 !important;
}
.layui-card-header .text-light{font-size:12.5px !important;color:var(--h-ink3) !important;font-weight:400 !important;}
.box__tit{position:relative !important;}
.box__tit::before{
  content:"" !important;
  position:absolute !important;left:6px !important;
  top:50% !important;margin-top:-9px;
  width:4px !important;height:18px !important;
  background:var(--h-grad) !important;
  border-radius:4px !important;
  box-shadow:none !important;
}
.layui-card-body{padding:14px 12px !important;}

/* ---------- ⑨ 工具项卡片 ---------- */
.tools-list{
  background:#fff !important;
  border:1px solid var(--h-line) !important;
  border-radius:16px !important;
  padding:13px !important;height:100%;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.tools-list:hover{
  box-shadow:0 10px 24px rgba(14,158,142,.10) !important;
  transform:translateY(-2px);
  border-color:rgba(14,158,142,.28) !important;
}
.tools-list .layui-col-md3 img,
.tools-list .layui-col-xs3 img,
.img-index{
  width:52px !important;height:52px !important;
  object-fit:contain;
  border-radius:14px !important;
  background:var(--h-soft) !important;
  padding:6px !important;
}
.tools-list .layui-col-md9{padding-left:14px !important;}
.tools-list a{
  font-size:15.5px !important;font-weight:700 !important;
  color:var(--h-ink) !important;
  margin-bottom:4px !important;line-height:1.32 !important;
  transition:color .15s ease;
}
.tools-list:hover a{color:var(--h-brand) !important;}
.tools-list p{font-size:12px !important;color:var(--h-ink3) !important;line-height:1.5 !important;margin:6px 0 8px !important;}
.tools-list .text-lighter{font-size:12px !important;color:var(--h-ink3) !important;}

/* ---------- ⑩ 友链 / 打赏 / 页脚 ---------- */
.layui-card .layui-card-body a{color:var(--h-ink2) !important;font-size:13px !important;}
.layui-card .layui-card-body a:hover{color:var(--h-brand) !important;}
#popups{
  border-radius:999px !important;
  background:var(--h-grad) !important;
  box-shadow:0 6px 16px rgba(14,158,142,.25);
}
footer{background:#fff !important;border-top:1px solid var(--h-line) !important;color:var(--h-ink3) !important;}
footer a{color:var(--h-ink2) !important;}
footer a:hover{color:var(--h-brand) !important;}

/* ---------- ⑪ 桌面端增强 ---------- */
@media (min-width:768px){
  .banner{padding:30px 28px 24px !important;border-radius:22px !important;margin-bottom:20px !important;}
  .banner h1{font-size:32px !important;}
  .banner .layui-font-24,.banner .m-b-xs{font-size:14.5px !important;}
  .search-type{margin:0 0 16px !important;padding:12px 0 !important;}
  .search-main .layui-input,.search-main .layui-btn{height:54px !important;line-height:54px !important;}
  .layui-card{margin-bottom:20px !important;}
  .layui-card-header{padding:18px 20px !important;font-size:19px !important;}
  .layui-card-body{padding:16px !important;}
  .tools-list{padding:14px !important;}
  .tools-list a{font-size:16px !important;}
}

/* ---------- ⑫ 移动端（移动优先） ---------- */
@media (max-width:767px){
  body{font-size:14.5px;}
  .top{display:none !important;}
  .banner{padding:20px 14px 16px !important;border-radius:18px !important;}
  .banner h1{font-size:23px !important;}
  .search-type{margin:0 -14px 12px !important;padding:10px 14px !important;}
  .search-main .layui-input,.search-main .layui-btn{height:50px !important;line-height:50px !important;}
  .search-main .layui-btn{padding:0 22px !important;}
  .layui-card-header{padding:15px 16px !important;font-size:17px !important;}
  .layui-card-body{padding:12px 10px !important;}
  .tools-list{padding:11px !important;border-radius:14px !important;}
  .tools-list .layui-col-md3 img,
  .tools-list .layui-col-xs3 img,
  .img-index{width:46px !important;height:46px !important;border-radius:12px !important;}
  .tools-list a{font-size:15px !important;}
  .tools-list .layui-col-md9{padding-left:12px !important;}
}