/*
 * laolicms 网站综合管理系统 v1.0.0
 * 作者：丿king　　联系 QQ：1735737677
 * 本文件作用：站点频道三套版式（频道首页 / 列表页 / 内页）专用样式，旧站 daohang.php、sort.php、site.php 页内样式的整理版，
 *            laoli.css 已有的 dh-panel / site-panel / dhny_* 一类类名直接复用，这里只补频道特有的「图标+名称+域名」导航格子等，新类名统一以 html- 开头
 * 文件路径：application/template/laoli/public/pc/css/sub_html.css
 */

/* ===== 频道首页：分类面板里的一行信息 ===== */
.html-panel-count{margin-left:8px;font-size:12px;font-weight:400;color:var(--sub-text-color,#999);}
.html-panel-more{font-size:13px;color:var(--sub-text-color,#999);text-decoration:none;white-space:nowrap;}
.html-panel-more:hover{color:var(--chengb,#ff7200);}
.html-subchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed #f0f0f0;}
.html-subchips a{padding:4px 10px;border-radius:12px;background:#f5f6f8;font-size:12px;color:#666;text-decoration:none;cursor:pointer;transition:all .15s;}
.html-subchips a:hover{background:var(--chengb,#ff7200);color:#fff;}
.html-subchips a.active{background:var(--chengb,#ff7200);color:#fff;font-weight:600;}
.html-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;}
.html-grid-none{grid-column:1 / -1;padding:20px;text-align:center;font-size:14px;color:#aaa;}
.html-grid-none a{color:var(--chengb,#ff7200);}

/* ===== 首页：一级面板内的子分类胶囊切换 ===== */
.html-subchip{display:inline-block;padding:5px 14px;margin:0 8px 10px 0;border-radius:16px;background:#f5f6f8;font-size:13px;color:#666;cursor:pointer;text-decoration:none;transition:all .15s;border:1px solid transparent;}
.html-subchip:hover{color:var(--chengb,#ff7200);}
.html-subchip.active{background:var(--chengb,#ff7200);color:#fff;font-weight:600;}
.html-site-sub{margin-bottom:8px;}

/* ===== 首页：全部分类横向滚动胶囊条 ===== */
.html-catbar{display:flex;align-items:center;gap:8px;margin:15px 0 20px;padding:10px 12px;background:var(--bg-color,#fff);border:1px solid #eee;border-radius:8px;}
.html-catbar-label{flex:none;font-size:14px;font-weight:600;color:var(--text-color,#333);padding-right:8px;border-right:1px solid #eee;}
.html-catbar-btn{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid #e0e0e0;background:#fff;color:#666;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0;}
.html-catbar-btn:hover:not(:disabled){background:var(--chengb,#ff7200);color:#fff;border-color:var(--chengb,#ff7200);}
.html-catbar-btn:disabled{cursor:not-allowed;}
.html-catbar-track{flex:1 1 auto;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;padding:2px 4px;}
.html-catbar-track::-webkit-scrollbar{display:none;width:0;height:0;}
.html-catbar-item{display:inline-block;padding:6px 16px;margin-right:10px;border-radius:20px;background:#f5f6f8;font-size:13px;color:#555;text-decoration:none;transition:all .15s;border:1px solid transparent;flex-shrink:0;}
.html-catbar-item:hover{background:var(--chengb,#ff7200);color:#fff;border-color:var(--chengb,#ff7200);}

/* ===== 站点导航格子：图标 + 名称 + 域名（首页与列表页共用） ===== */
.html-site-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;}
.html-site-grid.is-tight{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
.html-site-item{position:relative;display:flex;background:var(--bg-color,#fff);border:1px solid #f0f0f0;border-radius:8px;transition:box-shadow .2s,transform .2s,border-color .2s;}
.html-site-item:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px);border-color:var(--chengb,#ff7200);}
.html-site{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;padding:10px;text-decoration:none;}
.html-site-ico{flex:none;width:34px;height:34px;border-radius:8px;overflow:hidden;background:rgba(128,128,128,.1);}
.html-site-ico img{width:100%;height:100%;object-fit:cover;display:block;}
.html-site-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;color:var(--text-color,#333);}
.html-site-domain{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:12px;color:var(--sub-text-color,#999);}
.html-site:hover .html-site-name,.html-site:hover .html-site-domain{color:var(--chengb,#ff7200);}
.html-site-go{flex:none;display:flex;align-items:center;justify-content:center;width:34px;font-size:12px;color:#ccc;border-left:1px solid #f5f5f5;text-decoration:none;}
.html-site-go:hover{color:#fff;background:var(--chengb,#ff7200);border-radius:0 7px 7px 0;}

/* ===== 列表页：二级分类胶囊 + 排序工具条 ===== */
.html-subnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px;}
.html-subnav-item{padding:5px 12px;border-radius:14px;background:#f5f6f8;font-size:13px;color:#666;text-decoration:none;}
.html-subnav-item.active,.html-subnav-item:hover{background:var(--chengb,#ff7200);color:#fff;}
.html-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:var(--bg-color,#fff);border-radius:6px;padding:12px 15px;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.html-toolbar-title{font-size:16px;font-weight:600;color:var(--text-color,#333);}
.html-toolbar-count{margin-left:8px;font-size:12px;font-weight:400;color:#999;}
.html-toolbar-sort{display:flex;flex-wrap:wrap;gap:6px;}
.html-toolbar-sort a{padding:5px 12px;border:1px solid #eee;border-radius:4px;font-size:13px;color:#666;text-decoration:none;}
.html-toolbar-sort a.active,.html-toolbar-sort a:hover{border-color:var(--chengb,#ff7200);color:var(--chengb,#ff7200);background:#fff8f2;}
.html-bottom{margin-top:5px;}

/* ===== 内页：信息卡右侧 ===== */
.html-copy-box{width:100%;}
.html-copy{width:100%;padding:7px 8px;border:1px solid #eee;border-radius:4px;font-size:12px;color:#666;box-sizing:border-box;background:var(--bg-color,#fff);}
.html-copy-tip{display:block;margin-top:5px;font-size:12px;color:#bbb;}
.html-back-list{width:100%;padding:8px 0;border:1px solid #eee;border-radius:6px;font-size:13px;color:#666;text-align:center;text-decoration:none;box-sizing:border-box;}
.html-back-list:hover{border-color:var(--chengb,#ff7200);color:var(--chengb,#ff7200);}
.html-kw-row{grid-column:1 / -1;}
.html-kw-row .keyword-link{display:inline-block;margin:0 6px 4px 0;padding:3px 9px;border-radius:12px;background:#f5f6f8;font-size:12px;color:#666;text-decoration:none;}
.html-kw-row .keyword-link:hover{background:var(--chengb,#ff7200);color:#fff;}

/* 动态字段行 */
.html-field-list{list-style:none;margin:0;padding:10px 15px;}
.html-field-list li{display:flex;flex-wrap:wrap;gap:8px;padding:9px 0;border-bottom:1px dashed #f2f2f2;font-size:14px;color:var(--text-color,#333);}
.html-field-list li:last-child{border-bottom:none;}
.html-field-list li span{flex:none;width:110px;color:#999;font-size:13px;}
.html-field-list li a{color:var(--chengb,#ff7200);text-decoration:none;}
.html-field-list li img{max-width:120px;border-radius:4px;margin-right:6px;}

/* 点赞 / 收藏 / 举报按钮行 */
.html-operate{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:15px;}
.html-operate .love-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 22px;border-radius:4px;background:var(--chengb,#ff7200);color:#fff;font-size:14px;text-decoration:none;}
.html-operate .love-btn:hover{background:#e56700;color:#fff;}
.html-report-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 22px;border-radius:4px;background:#d32f2f;color:#fff;font-size:14px;text-decoration:none;}
.html-report-btn:hover{background:#b02525;color:#fff;}

/* 举报弹层（view.js 靠 id 控制 display） */
.html-report-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);z-index:9999;display:none;justify-content:center;align-items:center;}
.html-report-box{width:90%;max-width:500px;background:var(--bg-color,#fff);border-radius:8px;padding:25px;box-sizing:border-box;}
.html-report-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid #eee;padding-bottom:12px;}
.html-report-head h3{margin:0;font-size:18px;color:var(--text-color,#333);}
.html-report-close{cursor:pointer;font-size:24px;color:#999;line-height:1;}
.html-report-form{display:flex;flex-direction:column;gap:15px;}
.html-report-label{display:block;margin-bottom:6px;font-weight:600;color:var(--text-color,#333);font-size:14px;}
.html-report-label b{color:#d32f2f;}
.html-report-text,.html-report-input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px;color:var(--text-color,#333);background:var(--bg-color,#fff);}
.html-report-text{resize:vertical;}
.html-report-tip{font-size:13px;color:#999;margin:0;}
.html-report-foot{display:flex;gap:10px;justify-content:flex-end;}
.html-report-cancel{padding:8px 20px;border:1px solid #ddd;background:#f5f5f5;color:#666;border-radius:4px;cursor:pointer;}
.html-report-send{padding:8px 20px;border:none;background:#d32f2f;color:#fff;border-radius:4px;cursor:pointer;}

/* 详情文字行 + 加入好处 */
.html-detail-line p{margin-bottom:6px;}
.html-detail-line b{color:var(--text-color,#333);}
.html-jiaru-p{font-size:13px;color:#666;margin-bottom:5px;}
.html-jiaru-warn{font-size:13px;color:#d32f2f;font-weight:600;margin:10px 0;}
.html-jiaru-btn{display:inline-block;padding:8px 20px;border-radius:4px;background:var(--chengb,#ff7200);color:#fff;font-size:14px;text-decoration:none;}
.html-jiaru-btn:hover{background:#e56700;color:#fff;}

/* ===== 移动端适配 ===== */
@media (max-width:1000px){
    .html-site-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
    .html-duo{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:768px){
    .html-site-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
    .html-site{padding:8px;}
    .html-site-ico{width:28px;height:28px;}
    .html-site-name{font-size:13px;}
    .html-site-domain{font-size:11px;}
    .html-toolbar{flex-direction:column;align-items:flex-start;}
    .html-field-list li span{width:88px;}
}
@media (max-width:480px){
    .html-site-grid{grid-template-columns:minmax(0,1fr);}
}

/* ===== 夜间模式 ===== */
.dark-mode .html-site-item,.dark-mode .html-subnav-item,.dark-mode .html-subchips a{background:#252525;border-color:#333;color:#ccc;}
.dark-mode .html-site-name{color:#e0e0e0;}
.dark-mode .html-site:hover .html-site-name,.dark-mode .html-site:hover .html-site-domain{color:var(--chengb,#ff7200);}
.dark-mode .html-report-box,.dark-mode .html-copy{background:#1e1e1e;color:#ccc;border-color:#3a3a3a;}
.dark-mode .html-field-list li{color:#ccc;border-bottom-color:#2f2f2f;}