/* sitecms 默认模板样式表
 * 设计原则：
 *   1. 颜色/圆角/间距/阴影全部走 CSS 变量集中在 :root，站点换肤时改这一处即可，不用逐条件改选择器；
 *   2. 移动端（<900px）主栏/侧栏单列堆叠，导航折叠进抽屉菜单；桌面端主栏+侧栏两栏布局；
 *   3. 类名与模板标签一一对应，方便二次开发时对照 docs/template.md 的变量表增删模块。
 */
:root{
  --primary:#2f5fff;
  --primary-dark:#1c3fd6;
  --primary-soft:#eef2ff;
  --accent:#ff7a45;         /* 价格/下载等强调色 */
  --text:#1d2129;
  --text-2:#4e5969;
  --muted:#8a93a6;
  --border:#e6e8ee;
  --bg:#f5f7fb;
  --card:#ffffff;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 10px 30px -14px rgba(20,30,60,.16);
  --shadow-sm:0 2px 10px rgba(20,30,60,.06);
  --ease:.2s ease;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--primary)}
img{max-width:100%;height:auto;display:block}
ul{list-style:none;margin:0;padding:0}
table{border-collapse:collapse}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ============ 头部 / 导航 ============ */
.site-header{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(20,30,60,.03)}
.header-inner{display:flex;align-items:center;gap:22px;height:66px}
.logo{display:flex;align-items:center;font-size:20px;font-weight:800;letter-spacing:.2px;white-space:nowrap;flex:0 0 auto}
.logo img{max-height:38px;display:block}

.nav-toggle{display:none;flex:0 0 auto;width:38px;height:38px;margin-left:auto;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--card);cursor:pointer;position:relative}
/* 三道杠：span 自身是中间那道，相对按钮左右各留 9px；::before/::after 是上下两道，
   相对 span 自己的盒子铺满（left/right:0），不能再写 9px——否则会在 span 已缩窄的宽度基础上
   再收缩一次，宽度变 0 而"消失"，之前的版本就踩了这个坑 */
.nav-toggle span{position:absolute;left:9px;right:9px;top:18px;height:2px;background:var(--text);border-radius:2px;
  transition:background var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:var(--text);border-radius:2px;
  transition:transform var(--ease),opacity var(--ease)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.nav{display:flex;gap:2px;flex:1;min-width:0}
.nav-item{position:relative}
.nav-item>a{display:flex;align-items:center;height:66px;padding:0 13px;white-space:nowrap;font-size:14.5px;font-weight:500}
.nav-item>a.on{color:var(--primary)}
.nav-item>a.on::after,.nav-item:hover>a::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:2px;background:var(--primary)}
.nav-item .sub{display:none;position:absolute;left:0;top:100%;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:6px;min-width:150px;box-shadow:var(--shadow);z-index:5}
.nav-item:hover .sub{display:block}
.nav-item .sub a{display:block;padding:8px 12px;border-radius:6px;font-size:13.5px}
.nav-item .sub a:hover{background:var(--bg);color:var(--primary)}

.search{display:flex;gap:0;flex:0 0 auto}
.search input{height:36px;width:168px;padding:0 12px;border:1px solid var(--border);border-right:0;
  border-radius:999px 0 0 999px;outline:none;background:var(--bg);transition:border-color var(--ease)}
.search input:focus{border-color:var(--primary);background:var(--card)}
.search button{height:36px;padding:0 16px;border:0;border-radius:0 999px 999px 0;background:var(--primary);
  color:#fff;cursor:pointer;font-size:13.5px;transition:background var(--ease)}
.search button:hover{background:var(--primary-dark)}
.langs{display:flex;gap:10px;font-size:12.5px;color:var(--muted);flex:0 0 auto}
.langs a.on{color:var(--primary);font-weight:700}

/* ============ 主体布局 ============ */
.main{padding:28px 0 48px;min-height:55vh}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.crumb{font-size:13px;color:var(--muted);margin:0 0 18px}
.crumb a:hover{color:var(--primary)}
.crumb .sep{margin:0 6px;color:var(--border)}
.page-title{font-size:25px;font-weight:800;margin:0 0 10px;letter-spacing:.2px}
.intro{color:var(--text-2);margin:0 0 18px;line-height:1.8}
.muted{color:var(--muted);font-size:13px}
.empty{color:var(--muted);padding:34px 0;text-align:center;font-size:14px;
  background:var(--card);border:1px dashed var(--border);border-radius:var(--radius)}

/* 首页焦点区 */
.hero{border-radius:var(--radius);padding:48px 36px;margin-bottom:30px;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:var(--shadow)}
.hero h1{font-size:30px;margin:0 0 10px;font-weight:800}
.hero p{opacity:.92;margin:0;font-size:15px}

.block{margin-bottom:36px}
.block-title{font-size:19px;font-weight:800;margin:0 0 16px;display:flex;align-items:center;gap:10px}
.block-title::before{content:"";width:4px;height:18px;background:var(--primary);border-radius:3px}
.block-title a:first-of-type{color:inherit}
.block-title .more{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--muted)}
.block-title .more:hover{color:var(--primary)}

/* 卡片列表（首页/专题区块） */
.card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  transition:transform var(--ease),box-shadow var(--ease)}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card .thumb{display:block;aspect-ratio:16/10;background:var(--bg);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.card:hover .thumb img{transform:scale(1.05)}
.card h3{font-size:15px;font-weight:700;margin:13px 14px 6px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card p{font-size:13px;color:var(--muted);margin:0 14px 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{display:block;font-size:12px;color:var(--muted);margin:0 14px 14px}

/* 纯文字列表（首页按栏目/相关内容） */
.text-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--border)}
.text-list li:last-child{border-bottom:0}
.text-list li a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.text-list time{font-size:12px;color:var(--muted);flex:0 0 auto}
.idx{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;
  background:var(--primary-soft);color:var(--primary);font-size:11.5px;font-weight:700;flex:0 0 auto}

.subcats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.subcats a{padding:5px 14px;border:1px solid var(--border);border-radius:999px;font-size:13px;background:var(--card)}
.subcats a:hover{border-color:var(--primary);color:var(--primary)}

/* 文章型列表（栏目/标签/搜索结果） */
.article-list>li{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--border)}
.article-list>li:last-child{border-bottom:0}
.article-list .pic{flex:0 0 210px;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg)}
.article-list .pic img{width:210px;height:132px;object-fit:cover;transition:transform .3s ease}
.article-list .pic:hover img{transform:scale(1.05)}
.article-list h3{font-size:17px;font-weight:700;margin:0 0 9px;line-height:1.5}
.article-list p{color:var(--text-2);font-size:13.5px;margin:0 0 10px;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-list .meta{font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.flag{font-style:normal;font-size:11.5px;color:#fff;background:#f53f3f;border-radius:4px;padding:2px 7px;margin-left:8px;font-weight:600}
.chip{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--text-2)}
.chip.price{background:#fff1ea;color:var(--accent);font-weight:700}

/* ============ 详情页 ============ */
.article-title{font-size:26px;line-height:1.4;font-weight:800;margin:0 0 14px}
.article-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted);
  padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:22px}
.flag-original{font-style:normal;font-size:11.5px;color:var(--primary);background:var(--primary-soft);
  border-radius:4px;padding:2px 8px;font-weight:700}
.article-thumb img{border-radius:var(--radius)}
.article-summary{background:var(--card);border:1px solid var(--border);padding:14px 18px;border-radius:var(--radius-sm);
  color:var(--text-2);font-size:14px;margin:0 0 20px}
.article-body{font-size:16px;line-height:1.95;color:var(--text)}
.article-body img{margin:16px 0;border-radius:var(--radius-sm)}
.article-body p{margin:0 0 16px}

.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;background:var(--primary);color:#fff;
  border-radius:999px;font-size:14px;font-weight:600;border:0;cursor:pointer;transition:background var(--ease),transform var(--ease)}
.btn:hover{background:var(--primary-dark);color:#fff;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn.ghost:hover{background:var(--primary-soft)}
.link-more{font-size:13px;color:var(--primary);font-weight:600}
.link-more:hover{color:var(--primary-dark)}

/* 下载模型专属：文件信息 + 操作区 */
.dl-box{margin:22px 0;padding:20px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.dl-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.dl-tag{font-size:12.5px;padding:4px 11px;border-radius:999px;background:var(--bg);color:var(--text-2)}
.dl-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.dl-note{margin:12px 0 0;font-size:13px;color:var(--text-2)}

/* 商品模型专属：价格区 + 相册 */
.price-box{margin:22px 0;padding:20px;background:linear-gradient(180deg,#fff7f3,var(--card));
  border:1px solid #ffe3d3;border-radius:var(--radius)}
.price-main{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.price-cur{font-size:30px;font-weight:800;color:var(--accent)}
.price-old{font-size:15px;color:var(--muted);text-decoration:line-through}
.price-unit{font-size:13px;color:var(--muted)}
.price-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--text-2)}
.price-service{margin:12px 0 0;font-size:13px;color:var(--text-2)}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:20px 0}
.gallery-grid.gallery-grid-lg{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.gitem{display:block;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg);aspect-ratio:1/1}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gitem:hover img{transform:scale(1.08)}

/* 视频模型专属 */
.video-box{margin:22px 0}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000}
.video-frame iframe,.video-frame video{width:100%;height:100%;border:0;display:block}
.video-meta{display:flex;gap:16px;font-size:13px;color:var(--muted);margin-top:10px}

.params{width:100%;margin:18px 0;font-size:14px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.params td{padding:10px 16px;border-bottom:1px solid var(--border)}
.params tr:last-child td{border-bottom:0}
.params tr:nth-child(odd){background:var(--bg)}

.tags,.topics{margin:18px 0 0;font-size:13.5px;color:var(--text-2)}
.tags a,.topics a{display:inline-block;padding:3px 12px;margin:0 8px 8px 0;background:var(--bg);border-radius:999px;font-size:13px}
.tags a:hover,.topics a:hover{background:var(--primary-soft);color:var(--primary)}

.prevnext{display:flex;flex-wrap:wrap;gap:10px 28px;margin:28px 0;padding:16px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:14px;color:var(--muted)}
.prevnext a{color:var(--text);font-weight:500}
.related h3{font-size:17px;font-weight:800;margin:0 0 12px}

/* ============ 单页（page.htm） ============ */
.single-page{max-width:860px;margin:0 auto}
.page-banner img{width:100%;border-radius:var(--radius)}
.subtitle{color:var(--muted);margin:0 0 18px;font-size:15px}
.update-time{margin-top:32px;font-size:13px;color:var(--muted)}

/* ============ 侧栏 ============ */
.side-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:20px}
.side-box h3{font-size:15.5px;font-weight:800;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.side-list li{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:13.5px}
.side-list li a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-list em{font-style:normal;font-size:12px;color:var(--muted)}

/* ============ 专题 / 标签 / 搜索 / 404 ============ */
.topic-head{text-align:center;padding:24px 0}
.topic-banner{width:100%;border-radius:var(--radius);margin-bottom:20px}
.topic-head h1{font-size:26px;font-weight:800;margin:0 0 10px}
.topic-intro{color:var(--text-2);max-width:760px;margin:0 auto;line-height:1.8}

.search-big{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.search-big input{flex:1;min-width:200px;height:46px;padding:0 16px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:15px;outline:none;background:var(--card)}
.search-big input:focus{border-color:var(--primary)}
.search-big button{height:46px;padding:0 28px;border:0;border-radius:var(--radius-sm);background:var(--primary);
  color:#fff;cursor:pointer;font-weight:600}
.search-big button:hover{background:var(--primary-dark)}
.search-select{height:46px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:14px;background:var(--card);color:inherit}
.article-list mark,.search-big mark{background:#fff3a3;color:inherit;padding:0 1px;border-radius:2px}

.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-cloud li a{display:inline-block;padding:5px 13px;border:1px solid var(--border);border-radius:999px;font-size:12.5px;color:var(--text-2)}
.tag-cloud li a:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}

.notfound{text-align:center;padding:50px 0}
.notfound h1{font-size:84px;font-weight:800;color:var(--primary);margin:0;letter-spacing:2px}
.notfound>p{color:var(--text-2)}
.notfound .block{max-width:580px;margin:38px auto 0;text-align:left}

/* ============ 分页 ============ */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:30px 0 6px;font-size:14px}
.pager a,.pager .cur{min-width:36px;height:36px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card)}
.pager a:hover{border-color:var(--primary);color:var(--primary)}
.pager .cur{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}
.pager .total{margin-left:auto;color:var(--muted);font-size:12.5px}

/* ============ 页脚 ============ */
.site-footer{border-top:1px solid var(--border);background:var(--card);padding:30px 0;margin-top:36px}
.footer-inner{text-align:center;color:var(--muted);font-size:13px}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:14px}
.footer-nav a:hover{color:var(--primary)}
.copyright,.powered{margin:4px 0}

/* ============ 响应式：移动端单列 ============ */
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .header-inner{height:58px;gap:14px}
  .nav-toggle{display:block}
  .nav{position:fixed;left:0;right:0;top:58px;bottom:0;background:var(--card);flex-direction:column;
    padding:14px 20px;overflow-y:auto;gap:0;display:none;z-index:40}
  .nav.open{display:flex}
  .nav-item>a{height:auto;padding:13px 4px;border-bottom:1px solid var(--border);font-size:15.5px}
  .nav-item>a.on::after,.nav-item:hover>a::after{display:none}
  .nav-item .sub{position:static;display:block;border:0;box-shadow:none;padding:0 0 6px 14px;min-width:0}
  .search{order:3;flex:1 1 100%}
  .search input{width:100%;flex:1}
  .langs{display:none}
  .hero{padding:32px 22px}
  .hero h1{font-size:24px}
  .article-list>li{flex-direction:column;gap:12px}
  .article-list .pic,.article-list .pic img{width:100%;flex:none;height:auto;aspect-ratio:16/10}
  .price-main{flex-wrap:wrap}
  .dl-actions .btn,.dl-actions .btn.ghost{flex:1 1 auto;justify-content:center}
}
@media(max-width:520px){
  .wrap{padding:0 14px}
  .card-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
}