/* ============================================================
   KPOP.WANG 暗黑金前台统一样式
   覆盖 PbootCMS 默认浅色模板，使 CMS 前台页面与主页视觉一致。
   仅通过内页 comm/head.html 引入，不影响主页自身样式。
   放置于 bootstrap.min.css 之后，用高优先级覆盖浅色主题。
   ============================================================ */

:root{
  --bg:#07080C;
  --bg-2:#0B0D14;
  --bg-3:#11141E;
  --bg-4:#161A26;
  --gold:#F5B041;
  --gold-2:#FFC861;
  --gold-dim:rgba(245,176,65,.14);
  --gold-line:rgba(245,176,65,.35);
  --text:#EDF0F7;
  --text-2:#C9CEE0;
  --text-3:#9AA3B8;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

/* ---------- 基础 ---------- */
html,body{background:var(--bg)!important;color:var(--text)!important;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif!important;
  line-height:1.7!important;
  -webkit-font-smoothing:antialiased;
}
*::selection{background:var(--gold);color:#1a1206;}
a{color:var(--gold);text-decoration:none;transition:color .2s,opacity .2s;}
a:hover{color:var(--gold-2);}
img{max-width:100%;height:auto;}
.clear{clear:both;}

/* ---------- 容器 ---------- */
.container,.container-fluid{max-width:1180px;}
.pages{padding:34px 16px 50px;min-height:50vh;}

/* ---------- 顶部导航 navbar ---------- */
.navbar.navbar-light.bg-light.fixed-top,
.navbar{
  background:rgba(11,13,20,.92)!important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gold-line)!important;
  box-shadow:0 6px 24px rgba(0,0,0,.4)!important;
  padding-top:.4rem!important;padding-bottom:.4rem!important;
}
.navbar-light .navbar-brand,
.navbar-brand{color:var(--gold)!important;font-weight:700;letter-spacing:.5px;font-size:1.25rem;}
.navbar-light .navbar-brand:hover{color:var(--gold-2)!important;}

/* 强制约束 LOGO 尺寸，防止默认 jpg 在小屏被父容器拉成巨块 */
.navbar-brand img,
.navbar-brand > img,
img.logo-sm-height,
.logo-sm-height{
  display:inline-block!important;
  max-height:48px!important;
  max-width:180px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
}
@media (max-width:991.98px){
  .navbar-brand img,
  img.logo-sm-height{max-height:36px!important;max-width:140px!important;}
}
@media (max-width:575.98px){
  .navbar-brand img,
  img.logo-sm-height{max-height:32px!important;max-width:120px!important;}
}
.navbar-light .navbar-nav .nav-link{
  color:var(--text-2)!important;font-weight:500;padding:.5rem .95rem!important;
  position:relative;transition:color .2s;
}
.navbar-light .navbar-nav .nav-link:hover{color:var(--gold)!important;}
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-nav li.active .nav-link{color:var(--gold)!important;}
.navbar-nav li.active .nav-link::after{
  content:"";position:absolute;left:.95rem;right:.95rem;bottom:.1rem;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:2px;
}
.navbar-light .navbar-toggler{border-color:var(--gold-line)!important;color:var(--gold)!important;}
.navbar-light .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23F5B041' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")!important;
}
.navbar-text{color:var(--text-2)!important;}
.navbar-text a{color:var(--text-2)!important;}
.navbar-text a:hover{color:var(--gold)!important;}
.head-sm-height,.head-sm-height.head-sm-height{height:71px!important;}

/* 移动端展开菜单背景 */
@media (max-width:991.98px){
  .navbar-collapse{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
    margin-top:8px;padding:8px 6px;}
  .navbar-nav li.active .nav-link::after{display:none;}
}

/* ---------- 头部大屏 jumbotron ---------- */
.jumbotron.jumbotron-fluid{
  background:linear-gradient(135deg,#0c0f18 0%,#13161f 60%,#1b1505 100%)!important;
  border-bottom:1px solid var(--gold-line);
  padding:54px 0 46px!important;margin-bottom:0!important;
}
.jumbotron .container.text-light,.jumbotron .container{color:var(--text)!important;}
.jumbotron h1{color:var(--gold)!important;font-weight:700;letter-spacing:.5px;}
.jumbotron p{color:var(--text-2)!important;}

/* ---------- 当前位置 / 分类导航 ---------- */
.text-right.position,.position{color:var(--text-3)!important;text-align:right!important;}
.text-right.position a,.position a{color:var(--text-3);}
.text-right.position a:hover,.position a:hover{color:var(--gold);}
.sonsort .btn{margin-right:8px;}

/* ---------- 按钮 ---------- */
.btn{
  border-radius:10px!important;font-weight:600;letter-spacing:.3px;
  padding:.5rem 1.15rem!important;border:1px solid transparent!important;transition:all .2s!important;
}
.btn-info,.btn-primary{
  background:linear-gradient(135deg,var(--gold),var(--gold-2))!important;
  color:#1a1206!important;border-color:transparent!important;
}
.btn-info:hover,.btn-primary:hover{filter:brightness(1.08);color:#1a1206!important;}
.btn-light,.btn-secondary{
  background:transparent!important;color:var(--gold)!important;border:1px solid var(--gold-line)!important;
}
.btn-light:hover,.btn-secondary:hover{background:var(--gold-dim)!important;color:var(--gold-2)!important;}
.btn-danger{background:#3a1d1d!important;color:#ffb4b4!important;border-color:#5a2a2a!important;}
.btn-success{background:#14331f!important;color:#9be8b4!important;border-color:#1f5a36!important;}
.btn-link{color:var(--gold)!important;}

/* ---------- 徽章 ---------- */
.badge{border-radius:999px!important;font-weight:600;padding:.25em .7em!important;}
.badge-danger{background:#3a1d1d!important;color:#ffb4b4!important;}
.badge-warning{background:#2e2410!important;color:var(--gold-2)!important;}
.badge-info{background:var(--gold-dim)!important;color:var(--gold)!important;}
.badge-light{background:transparent!important;color:var(--gold)!important;border:1px solid var(--gold-line)!important;}
.badge-secondary{background:#1c2030!important;color:var(--text-2)!important;}

/* ---------- 卡片 ---------- */
.card{
  background:var(--bg-3)!important;border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .25s,border-color .25s;
}
.card:hover{transform:translateY(-4px);border-color:var(--gold-line)!important;}
.card-header{background:var(--bg-4)!important;color:var(--gold)!important;border-bottom:1px solid var(--line)!important;}
.card-footer{background:var(--bg-4)!important;border-top:1px solid var(--line)!important;color:var(--text-3)!important;}
.card-title{color:var(--gold)!important;font-weight:700;}
.card-text{color:var(--text-2)!important;}
.card-img-top,.card-img-150,.card-img-200{border-bottom:1px solid var(--line);}

/* ---------- 新闻/列表条目（newslist 默认 li 结构） ---------- */
.pages>ul{list-style:none;padding:0;margin:0;}
.pages>ul>li{
  padding:16px 4px;border-bottom:1px dashed var(--line)!important;transition:background .2s;
}
.pages>ul>li:hover{background:var(--bg-2);}
.pages>ul>li>a{display:flex;align-items:center;color:var(--text)!important;font-size:1.02rem;}
.pages>ul>li>a:hover{color:var(--gold)!important;}
.pages>ul>li .fa,.pages>ul>li i{color:var(--gold);margin-right:10px;}
.pages>ul>li .float-right{margin-left:auto;color:var(--text-3)!important;font-size:.85rem;}
.lh-3{line-height:1.9!important;}
.border-bottom-dashed{border-bottom:1px dashed var(--line)!important;}

/* 列表卡片网格（当模板使用 row/col 卡片时） */
.row .col-12.col-md-4 .card,.row .col-md-3 .card,.row .col-lg-3 .card{height:100%;}

/* ---------- 内容正文（news.html 等） ---------- */
.content{color:var(--text-2);font-size:1.02rem;line-height:1.9;}
.content h1,.content h2,.content h3,.content h4{color:var(--gold);font-weight:700;margin:1.4em 0 .6em;line-height:1.35;}
.content h2.fs-sm-28.fs-20,.fs-sm-28{color:var(--gold)!important;font-weight:700!important;}
.content p{margin:0 0 1.1em;}
.content img{border-radius:10px;margin:14px 0;box-shadow:var(--shadow);}
.content a{color:var(--gold);border-bottom:1px solid var(--gold-line);}
.content blockquote{border-left:3px solid var(--gold);background:var(--bg-2);padding:12px 18px;margin:1.2em 0;border-radius:0 10px 10px 0;color:var(--text-2);}
.content ul,.content ol{padding-left:1.4em;margin:0 0 1.1em;}
.content li{margin:.35em 0;}
.content table{width:100%;border-collapse:collapse;margin:1.2em 0;background:var(--bg-3);border-radius:10px;overflow:hidden;}
.content th,.content td{border:1px solid var(--line);padding:10px 12px;color:var(--text-2);}
.content th{background:var(--bg-4);color:var(--gold);}
.content code{background:var(--bg-4);color:var(--gold-2);padding:2px 6px;border-radius:6px;font-size:.9em;}

/* 详情页标题区 */
.pages h2.text-center.fs-sm-28.fs-20{color:var(--gold)!important;font-weight:700!important;font-size:1.7rem!important;}
.text-secondary{color:var(--text-3)!important;}
.border-bottom{border-bottom:1px solid var(--line)!important;}
.pb-2{padding-bottom:.5rem!important;}
.mb-3{margin-bottom:1rem!important;}
.mt-3{margin-top:1rem!important;}
.text-center{text-align:center!important;}

/* ---------- 表单 ---------- */
.form-control,.input-group-text{
  background:var(--bg-3)!important;color:var(--text)!important;
  border:1px solid var(--line-2)!important;border-radius:10px!important;
}
.form-control:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px var(--gold-dim)!important;outline:none;}
.form-control::placeholder{color:var(--text-3);}
.form-group{margin-bottom:1rem;}
textarea.form-control{min-height:110px;}

/* ---------- 表格 .table ---------- */
.table{color:var(--text-2);background:var(--bg-3);}
.table td,.table th{border-color:var(--line)!important;}
.table thead th{color:var(--gold);border-bottom:1px solid var(--gold-line)!important;}

/* ---------- 分页 ---------- */
.pagination{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;justify-content:center!important;}
.page-item.page-link,.pagination .page-link{
  background:var(--bg-3)!important;color:var(--text-2)!important;border:1px solid var(--line)!important;
  border-radius:10px!important;padding:.45rem .9rem!important;transition:all .2s;
}
.page-item.page-link:hover,.pagination .page-link:hover{color:var(--gold)!important;border-color:var(--gold-line)!important;}
.page-item.page-link:hover{background:var(--gold-dim)!important;}

/* ---------- 媒体（评论） ---------- */
.media{border-bottom:1px solid var(--line)!important;}
.media h6{color:var(--text)!important;}
.media h6 strong{color:var(--gold);}
.media .badge-light{background:transparent!important;color:var(--text-3)!important;border:1px solid var(--line)!important;}

/* ---------- 模态框 ---------- */
.modal-content{background:var(--bg-2)!important;border:1px solid var(--gold-line)!important;border-radius:14px!important;}
.modal-header,.modal-footer{border-color:var(--line)!important;}
.modal-title{color:var(--gold)!important;}
.modal .close{color:var(--text)!important;opacity:.8;}
.modal .close:hover{color:var(--gold)!important;}

/* ---------- 页脚 footer ---------- */
.footer.mt-3.pt-5.border-top.text-secondary.bg-light,
.footer{
  background:var(--bg-2)!important;color:var(--text-3)!important;
  border-top:1px solid var(--gold-line)!important;
}
.footer h5{color:var(--gold)!important;font-weight:700;margin-bottom:.8rem;}
.footer ul.lh-2 li{color:var(--text-3)!important;padding:.2rem 0;}
.footer a{color:var(--text-2)!important;}
.footer a:hover{color:var(--gold)!important;}
.footer .copyright{border-top:1px solid var(--line)!important;color:var(--text-3)!important;padding:14px 0;}

/* 手机底部导航 */
.container-fluid.bg-info.fixed-bottom,
.fixed-bottom.bg-info{
  background:var(--bg-2)!important;border-top:1px solid var(--gold-line)!important;
}
.fixed-bottom .col-4{border-color:var(--line)!important;}
.fixed-bottom a,.fixed-bottom .text-light{color:var(--gold)!important;}
.fixed-bottom a:hover{color:var(--gold-2)!important;}

/* 在线客服浮窗（暗金化，保持功能） */
.online{position:fixed;right:14px;bottom:120px;z-index:60;}
.online dl{margin:0;}
.online dd{
  width:54px;height:54px;background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#1a1206;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:12px;cursor:pointer;box-shadow:var(--shadow);margin-bottom:10px;
}
.online dd i{color:#1a1206;font-size:18px;margin-bottom:2px;}
.online dt{
  background:var(--bg-2)!important;border:1px solid var(--gold-line)!important;border-radius:12px;
  color:var(--text)!important;box-shadow:var(--shadow);padding:14px!important;
}
.online dt h3{color:var(--gold)!important;margin:0 0 8px;font-size:15px;}
.online dt p{color:var(--text-2)!important;margin:.3rem 0;}
.online .remove i{color:var(--text-3);}

/* ---------- 杂项 ---------- */
.bg-white,.bg-light{background:var(--bg-3)!important;}
.bg-info{background:var(--gold-dim)!important;color:var(--gold)!important;}
.bg-light{color:var(--text-2)!important;}
.shadow-sm{box-shadow:var(--shadow)!important;}
.rounded{border-radius:var(--radius)!important;}
.text-light{color:var(--text)!important;}
.border-top{border-top:1px solid var(--line)!important;}
.border-right{border-right:1px solid var(--line)!important;}
.justify-content-center{justify-content:center!important;}
.justify-content-end{justify-content:flex-end!important;}

/* swiper / wow 无 JS 时退化保护 */
.swiper-container,.swiper-wrapper{display:block;}
.swiper-slide{display:inline-block;vertical-align:top;}

/* 滚动条美化（webkit） */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:#2a2f3e;border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:#3a4156;}

/* ============================================================
   根 head/foot（fuwu/images/fuwulist/imageslist 等独立模板共用）
   这些模板用的是自定义 #header/#nav/#footer 类名，非 Bootstrap
   ============================================================ */
#header{background:rgba(11,13,20,.92)!important;backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gold-line)!important;}
#header .inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;position:relative;padding:0 16px;}
#logo{margin:0;padding:10px 0;}
#logo a{display:inline-block;}
#logo img{height:54px;width:auto;}
#nav{flex:1;}
#nav>ul{display:flex;list-style:none;margin:0;padding:0;justify-content:flex-end;flex-wrap:wrap;}
.navbar-item{position:relative;}
.navbar-item>a{display:block;padding:14px 16px;color:var(--text-2)!important;font-weight:500;transition:color .2s;}
.navbar-item>a:hover{color:var(--gold)!important;}
.navbar-item.cur>a,.navbar-item>a.active{color:var(--gold)!important;}
.navbar-item.cur>a::after{content:"";display:block;height:2px;margin-top:4px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:2px;}
.navbar-item ul{position:absolute;top:100%;right:0;min-width:170px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:12px;padding:6px 0;display:none;z-index:50;}
.navbar-item:hover ul{display:block;}
.navbar-item ul .navbar-item>a{padding:10px 18px;}
#searchbox{margin-left:18px;}
#searchbox .input{display:flex;align-items:center;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:999px;padding:4px 6px 4px 14px;}
#searchbox .text{background:transparent;border:none;color:var(--text)!important;outline:none;width:140px;}
#searchbox .text::placeholder{color:var(--text-3);}
#searchbox .submit{background:var(--gold);border:none;color:#1a1206;border-radius:999px;
  padding:6px 14px;cursor:pointer;margin-left:6px;font-weight:600;}
#topBtn,#navBtn{display:none;}
#blank{height:0!important;}
@media (max-width:767px){
  #header .inner{flex-wrap:wrap;}
  #nav{width:100%;}
  #nav>ul{justify-content:flex-start;}
  #searchbox{margin:8px 0;}
}

/* 根 footer */
#footer{background:var(--bg-2)!important;border-top:1px solid var(--gold-line)!important;
  color:var(--text-3)!important;padding:40px 0 24px;}
#footer .inner{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;
  align-items:center;justify-content:space-between;padding:0 16px;}
#logoIcon .icon img{height:48px;}
#copyright{color:var(--text-3)!important;margin:0;}
#copyright a,#beian a{color:var(--text-2)!important;}
#copyright a:hover,#beian a:hover{color:var(--gold)!important;}

/* ============================================================
   独立模板容器（服务/图集 列表与详情）
   ============================================================ */
body#category,body#article{background:var(--bg)!important;}
#breadcrumb{background:var(--bg-2);border-bottom:1px solid var(--line);padding:12px 0;color:var(--text-3);}
#breadcrumb .inner,#breadcrumb a{max-width:1180px;margin:0 auto;padding:0 16px;color:var(--text-3);}
#breadcrumb a:hover{color:var(--gold);}
#wrapper,#workpost,#worklist,#servicelist{max-width:1180px;margin:30px auto;padding:0 16px;}
.columnname{margin-bottom:10px;}
.columnname h2{color:var(--gold)!important;font-weight:700;margin:0;}
.columnname h3{color:var(--text-3)!important;font-weight:400;font-size:1rem;margin:.2rem 0 0;}
.svlist,.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;margin-top:24px;}
article.item{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .25s,border-color .25s;}
article.item:hover{transform:translateY(-4px);border-color:var(--gold-line)!important;}
article.item .figure{display:block;color:inherit;}
article.item .img{overflow:hidden;background:var(--bg-4);}
article.item .img img{width:100%;display:block;transition:transform .3s;}
article.item:hover .img img{transform:scale(1.05);}
article.item .text{padding:16px 18px;}
article.item .wot,article.item .title{color:var(--gold)!important;font-size:1.1rem;font-weight:700;margin:0 0 8px;}
article.item .rows.intro,article.item .rows{color:var(--text-2)!important;font-size:.92rem;}
article.item .tag span{display:inline-block;background:var(--gold-dim);color:var(--gold);
  border-radius:999px;padding:2px 10px;font-size:.8rem;}
article.item .more{margin-top:10px;}
article.item .more a{color:var(--gold);}

/* 图集/服务 详情 */
.box,#imgbig{margin-bottom:24px;}
.box .item img,#imgbig img{border-radius:12px;width:100%;}
#imgtab .item i{display:block;width:100%;padding-top:66%;background-size:cover;background-position:center;
  border-radius:10px;border:1px solid var(--line);}
#postTitle,#pageTitle{color:var(--gold)!important;font-weight:700;font-size:1.7rem;margin-bottom:14px;}
.entry,.text{color:var(--text-2);line-height:1.9;}
.entry img,.text img{border-radius:10px;margin:14px 0;}
.side{margin-top:30px;}
#sidelist{background:var(--bg-3);border:1px solid var(--line);border-radius:14px;padding:18px;}
#sidelist h3{color:var(--gold)!important;}
#sidelist ul{list-style:none;padding:0;margin:0;}
#sidelist li{border-bottom:1px dashed var(--line);}
#sidelist li a{display:block;padding:10px 4px;color:var(--text-2)!important;}
#sidelist li a:hover{color:var(--gold)!important;}
#sidelist li a i{color:var(--gold);font-style:normal;margin-right:6px;}
.info{margin-top:14px;color:var(--text-3);}

/* 独立模板分页 */
.pagebar .pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;padding:0;margin:24px 0;}
.pagebar .page-item,.pagebar .page-link{background:var(--bg-3)!important;color:var(--text-2)!important;
  border:1px solid var(--line)!important;border-radius:10px!important;padding:.45rem .9rem!important;}
.pagebar .page-item:hover{color:var(--gold)!important;border-color:var(--gold-line)!important;}
.tac{text-align:center;color:var(--text-3)!important;}

/* caselist figure 卡片化 */
.figure{display:block;}
.figure-caption{color:var(--text-2)!important;padding-top:8px;}
.figure .card-img-200{overflow:hidden;background:var(--bg-4);border-radius:10px;}
.figure .card-img-200 img{width:100%;display:block;}

/* 详情-服务页补充 */
.border-info{border-color:var(--gold-line)!important;}
.view img,.preview img{border-radius:10px;width:100%;}
.view{position:relative;margin-bottom:14px;}