/* ===== Brand & Table Styles (preserve existing layout) ===== */
.jj-brand-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:32px}
.jj-brand-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,0.06);transition:transform .2s,box-shadow .2s;border:1px solid #f0f0f0}
.jj-brand-card:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(0,0,0,0.1)}
.jj-brand-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.jj-brand-card-name{font-size:16px;font-weight:700;color:#333}
.jj-brand-card-prices{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.jj-bcp-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #f0f0f0}
.jj-bcp-label{font-size:13px;color:#999}
.jj-bcp-price{font-size:16px;font-weight:600;color:#c8102e}
.jj-btn-full{width:100%;text-align:center}
.jj-up{color:#E74C3C;font-weight:600}
.jj-down{color:#27AE60;font-weight:600}
.jj-td-price{color:#C8962E;font-weight:600;text-align:right}
.jj-td-unit{color:#999;text-align:right}
.jj-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500}
.jj-tag-cn{background:#FFF3CD;color:#856404}
.jj-tag-hk{background:#E8F5E9;color:#2E7D32}
.jj-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:#FFF3CD;border-radius:12px;font-size:12px;color:#856404}
.jj-badge-dot{width:6px;height:6px;border-radius:50%;background:#27AE60;animation:jj-pulse 2s infinite}
@keyframes jj-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.jj-chart-card{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:20px;margin-bottom:24px}
.jj-chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.jj-chart-header h3{font-size:16px;font-weight:700;color:#333;margin:0}
.jj-chart-tabs{display:flex;gap:8px}
.jj-chart-tab{padding:6px 16px;border-radius:6px;font-size:13px;cursor:pointer;background:#F5EDE0;color:#666;transition:all .2s}
.jj-chart-tab.active{background:#C8962E;color:#fff}
.jj-chart-area{height:300px;position:relative}
.jj-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.jj-section-title{font-size:20px;font-weight:700;color:#333}
.jj-table-card{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden;margin-bottom:24px}
.jj-table-wrap{overflow-x:auto}
.jj-table{width:100%;border-collapse:collapse;font-size:14px}
.jj-table th{background:#F5EDE0;padding:12px 16px;text-align:left;font-weight:600;color:#666;white-space:nowrap}
.jj-table td{padding:12px 16px;text-align:left;border-bottom:1px solid #f0f0f0}
.jj-table tr:hover{background:#FFF9F0}
.jj-brand-name{font-weight:600;color:#333;display:flex;align-items:center;gap:6px;justify-content:center}
.jj-btn-detail{display:inline-block;padding:4px 12px;background:#C8962E;color:#fff;border-radius:4px;font-size:12px;text-decoration:none;transition:background .2s}
.jj-btn-detail:hover{background:#B8860B}
.jj-brand-list-wrap{max-width:1200px;margin:0 auto;padding:20px 16px}
.jj-breadcrumb{font-size:13px;color:#999;margin-bottom:16px}
.jj-breadcrumb a{color:#C8962E;text-decoration:none}
.jj-brand-trend-section{margin-top:32px}

/* ===== Mobile Responsive ===== */
/* å¯¼èªæ ·å¼ç± style.css ç»ä¸ç®¡ç */
body.jj-no-scroll{overflow:hidden}
.jj-table-wrap,.jj-table-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
.jj-brand-table{min-width:600px}
html,body{overflow-x:hidden;max-width:100%}
@media(max-width:1024px){
  .jj-nav{display:none!important}
  /* æ±å ¡æé®æ¾ç¤ºç± style.css ç®¡ç */
  /* grid 1024 ç± style.css ç®¡ç */
  .jj-brand-cards-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .jj-card,.jj-price-card{padding:12px;font-size:14px}
  .jj-section-title{font-size:18px}
  .jj-price-card-value{font-size:24px}
  .jj-table th,.jj-table td{padding:8px 10px}
  .jj-table{font-size:12px}
}
@media(max-width:640px){
  /* grid ç± style.css ç®¡ç */
  body{font-size:13px}
  .jj-quick-stats{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:8px}
  .jj-quick-stat{min-width:130px;flex:0 0 auto}
  .jj-price-card{padding:10px}
  .jj-recycle-card{padding:10px;flex-direction:column;gap:12px}
  .jj-article{padding:12px;font-size:14px}
  /* price-cards 640 ç± style.css ç®¡ç */
}
@media(max-width:480px){
  body{font-size:12px}
  .jj-card,.jj-price-card{padding:8px;font-size:12px}
  .jj-price-card-value{font-size:20px}
  .jj-recycle-card{padding:8px}
  .jj-article{padding:10px;font-size:13px}
  .jj-list-item{flex-direction:column;gap:6px}
  /* footer ç«æå·²ç§»é¤ï¼ç± grid å¸å±ç»ä¸ç®¡ç */
  .jj-section-title{font-size:16px}
  .jj-quick-stat{min-width:110px}
  /* price-cards ç± style.css ç®¡ç */
}
@media(max-width:380px){
  .jj-card,.jj-price-card{padding:6px;font-size:11px}
  .jj-price-card-value{font-size:18px}
  .jj-section-title{font-size:15px}
  .jj-quick-stat{min-width:100px}
  .jj-recycle-card{padding:6px}
  .jj-brand-cards-grid{gap:10px}
  .jj-brand-card{padding:12px}
}


/* ===== ç§»å¨ç«¯å¯¼èª & åºé¨ä¼å ===== */

/* æ±å ¡æé®å¨ header éå³å¯¹é½ */
.jj-menu-toggle{position:relative;z-index:101}

/* ä¾§è¾¹æ½å±ä»å·¦æ»å¥ï¼è¦ç header ä¸æ¹åºå */
.jj-nav-mobile{
  display:none;
  position:fixed;top:0;left:0;bottom:0;width:280px;max-width:80vw;
  background:#fff;z-index:1001;
  flex-direction:column;padding:80px 20px 20px;gap:0;
  transform:translateX(-100%);transition:transform .3s ease;
  box-shadow:2px 0 20px rgba(0,0,0,.15);overflow-y:auto
}
.jj-nav-mobile.active{display:flex;transform:translateX(0)}
.jj-nav-mobile .jj-nav-item{
  font-size:16px;padding:14px 0;border-bottom:1px solid #f0f0f0;width:100%;color:#333
}
.jj-nav-mobile .jj-nav-item:active{background:#f8f8f8}
.jj-nav-mobile .jj-nav-item.active{color:#C8962E}
.jj-nav-mobile .jj-nav-item.active::after{display:none}

/* é®ç½©å¨å±è¦ç */
.jj-nav-overlay{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.5);z-index:1000
}
.jj-nav-overlay.active{display:block}

/* æ±å ¡æé®å¨ç» */
.jj-menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.jj-menu-toggle.active span:nth-child(2){opacity:0}
.jj-menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== ææºç«¯ footer ä¼å ===== */
@media(max-width:640px){
  .jj-footer{padding:24px 0 16px}
  .jj-footer-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:16px 12px;
    text-align:left
  }
  .jj-footer-brand{grid-column:1/-1;margin-bottom:8px}
  .jj-footer-brand p{font-size:12px;line-height:1.6}
  .jj-footer-col h4{font-size:13px;margin-bottom:6px}
  .jj-footer-col a{font-size:12px;padding:2px 0}
  .jj-footer-bottom{font-size:11px;padding-top:14px;text-align:center}
  .jj-footer-bottom p{margin:2px 0}
}

@media(max-width:480px){
  .jj-footer-grid{grid-template-columns:1fr 1fr;gap:12px 10px}
}

@media(max-width:380px){
  .jj-footer-grid{grid-template-columns:1fr 1fr;gap:10px 8px}
  .jj-footer-brand{grid-column:1/-1}
}
  .jj-footer-brand{grid-column:1/-1}
  .jj-footer-brand p{font-size:12px;line-height:1.6}
  .jj-footer-col h4{font-size:13px;margin-bottom:8px}
  .jj-footer-col a{font-size:12px;padding:3px 0}
  .jj-footer-bottom{font-size:11px;padding-top:16px;text-align:center}
  .jj-footer-bottom p{margin:2px 0}
}

@media(max-width:380px){
  .jj-footer-grid{grid-template-columns:1fr 1fr;gap:16px}
}


/* ä¾§è¾¹æ å³é­æé® */
.jj-nav-mobile .jj-nav-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border:none;background:none;
  font-size:24px;color:#999;cursor:pointer;line-height:1
}
.jj-nav-mobile .jj-nav-close:hover{color:#333}

/* ä¼°ç®æ ç­¾ */
.jj-tag-estimated{
  display:inline-block;font-size:11px;color:#9C9C9C;
  background:#F0F0F0;padding:2px 6px;border-radius:4px;margin-left:2px
}

/* ===== 走势图: 新浪图按原始比例清晰显示, 不拉伸 ===== */
img#jj-price-chart{
  width:auto!important;max-width:100%!important;height:auto!important;max-height:420px;
  object-fit:contain;border-radius:8px
}

/* ===== è¡¨æ ¼ç§»å¨ç«¯ä¼å ===== */
.jj-table-wrap{
  -webkit-overflow-scrolling:touch;
  overflow-x:auto;
}
table.jj-table{
  min-width:600px;
}
table.jj-table th,table.jj-table td{
  white-space:nowrap;
  padding:8px 10px;
  font-size:13px;
}
table.jj-table th{
  position:sticky;top:0;
  background:#fff;z-index:1;
}

/* ===== ç§»å¨ç«¯éé ===== */
@media(max-width:768px){
  /* ä»·æ ¼å¡ç: 2å */
  .jj-price-cards{
    grid-template-columns:repeat(2,1fr)!important;
    gap:12px!important;
  }
  .jj-price-card{
    padding:14px!important;
  }
  .jj-price-card-value{
    font-size:20px!important;
  }
  .jj-price-card-label{
    font-size:12px!important;
  }
  .jj-price-change{
    font-size:12px!important;
  }
  /* èµ°å¿å¾ */
  img#jj-price-chart{
    max-height:220px;
  }
  .jj-chart-tabs{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:4px!important;
  }
  .jj-chart-tab{
    flex:0 0 auto;
    padding:6px 14px!important;
    font-size:13px!important;
    white-space:nowrap;
  }
  /* å¿«éç»è®¡: 3å */
  .jj-quick-stats{
    grid-template-columns:repeat(3,1fr)!important;
    gap:1px!important;
  }
  .jj-quick-stat{
    min-width:0!important;
    padding:8px 6px!important;
  }
  .jj-qs-value{
    font-size:16px!important;
  }
  .jj-qs-label{
    font-size:11px!important;
  }
  /* è¡¨æ ¼ç¼©å° */
  table.jj-table th,table.jj-table td{
    padding:6px 8px;
    font-size:12px;
  }
  /* åçå¡ç */
  .jj-brand-cards-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .jj-brand-card{
    padding:14px!important;
  }
  /* åºé¨å£°æ */
  .jj-price-source{
    padding:10px 16px!important;
    font-size:11px!important;
  }
  /* ä¼°ç®è¯´æ */
  .jj-brand-est-note{
    font-size:11px!important;
    padding:0 12px!important;
  }
}

@media(max-width:480px){
  /* ä»·æ ¼å¡ç: åå */
  .jj-price-cards{
    grid-template-columns:1fr 1fr!important;
  }
  .jj-price-card{
    padding:10px!important;
  }
  .jj-price-card-value{
    font-size:18px!important;
  }
  /* å¿«éç»è®¡: 2å */
  .jj-quick-stats{
    grid-template-columns:repeat(2,1fr)!important;
  }
  /* èµ°å¿å¾æ´å° */
  img#jj-price-chart{
    max-height:180px;
  }
  .jj-chart-tab{
    padding:5px 10px!important;
    font-size:12px!important;
  }
  /* å®¹å¨åè¾¹è·åå° */
  .jj-container{
    padding:0 12px!important;
  }
  .jj-section{
    padding:16px 0!important;
  }
  /* è¡¨æ ¼æ´ç´§å */
  table.jj-table th,table.jj-table td{
    padding:5px 6px;
    font-size:11px;
  }
}

/* ===== 布局修复: 表格自适应 + 移动端快速统计完整显示 (2026-08-04) ===== */
/* 桌面/平板: 7 列表格自适应容器宽度, 不再出现横向滚动裁剪 */
table.jj-table{
  min-width:0!important;
  width:100%!important;
}
.jj-brand-table{
  min-width:0!important;
}
/* 移动端 768: 快速统计切 grid 3 列, 内容完整显示 */
@media(max-width:768px){
  .jj-quick-stats{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:1px!important;
    overflow-x:visible!important;
    padding:10px 8px!important;
  }
  .jj-quick-stat{
    min-width:0!important;
    flex:none!important;
    padding:8px 6px!important;
  }
  table.jj-table th,table.jj-table td{
    padding:6px 6px!important;
  }
}
/* 移动端 480: 快速统计切 grid 2 列 */
@media(max-width:480px){
  .jj-quick-stats{
    display:grid!important;
    grid-template-columns:repeat(2,1fr)!important;
    overflow-x:visible!important;
  }
  .jj-quick-stat{
    min-width:0!important;
    flex:none!important;
  }
  .jj-qs-value{
    font-size:15px!important;
  }
  /* 品牌表(首页6列): 隐藏次要列(铂金/报价时间), 核心 4 列完整显示; 列表页(#jj-brand-table 8列)不受影响 */
  .jj-brand-table:not(#jj-brand-table) th:nth-child(4),
  .jj-brand-table:not(#jj-brand-table) td:nth-child(4),
  .jj-brand-table:not(#jj-brand-table) th:nth-child(6),
  .jj-brand-table:not(#jj-brand-table) td:nth-child(6){
    display:none!important;
  }
  .jj-brand-table:not(#jj-brand-table) th:nth-child(1),
  .jj-brand-table:not(#jj-brand-table) td:nth-child(1){
    text-align:left!important;
  }
}

/* ===== 移动端标题布局修复 (2026-08-04) =====
   根因: style.css 移动端 .jj-section-header{flex-direction:column} 与
   extra.css 全局 align-items:center 叠加 -> 标题被水平居中 */
@media(max-width:640px){
  /* 通用栏目标题: 左对齐 */
  .jj-section-header{
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:6px!important;
    margin-bottom:14px!important;
  }
  /* 首页分类块: 标题+更多 保持一行, 左标题右更多 */
  .jj-cate-block .jj-section-header{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%;
  }
  /* 走势图 header: 纵向排布, 标题不换行 */
  .jj-chart-header{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:10px!important;
  }
  .jj-chart-header h3{
    white-space:nowrap;
    font-size:16px!important;
  }
  .jj-chart-tabs{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .jj-chart-tab{
    flex:0 0 auto;
    white-space:nowrap;
  }
  /* 分类块标题字号收紧 */
  .jj-cate-block .jj-section-title{
    font-size:15px!important;
  }
}

/* ===== Article Prev/Next & Related ===== */
.jj-article-prevnext{display:flex;flex-direction:column;gap:8px;margin:24px 0;padding:16px 20px;background:#fafaf8;border-radius:10px;border:1px solid #f0ece0;font-size:14px;line-height:1.7}
.jj-pn-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jj-pn-item a{color:#8a6d1d;text-decoration:none}
.jj-pn-item a:hover{color:#c8102e}
.jj-related{margin:24px 0}
.jj-related .jj-section-title{font-size:16px;font-weight:700;color:#333;padding-left:10px;border-left:4px solid #c9a227}
.jj-related .jj-cate-list{margin-top:12px}
.jj-seo-h1{font-size:0;height:0;margin:0;overflow:hidden}
.jj-section-title-h1{font-size:20px;font-weight:700;color:#333;margin:0}

/* ===== 顶部工具条 (银行金条/香港金价/历史金价/金价换算) ===== */
.jj-topbar{background:#faf6ec;border-bottom:1px solid #f0e8d6}
.jj-topbar-inner{max-width:1200px;margin:0 auto;padding:5px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.jj-topbar-tip{font-size:12px;color:#b9992f;font-weight:500}
.jj-topbar-links{display:flex;gap:20px}
.jj-topbar-links a{font-size:12px;color:#6d6d6d;text-decoration:none;transition:color .2s}
.jj-topbar-links a:hover{color:#c9a227}
@media (max-width: 992px){
.jj-topbar{display:none}
.jj-header-pad{height:0}
}

/* ===== 首页导航栏优化 (PC): 单行不换行 ===== */
@media (min-width: 993px) {
.jj-header-inner{flex-wrap:nowrap}
.jj-logo{flex-shrink:0;white-space:nowrap}
.jj-nav{flex:1;justify-content:flex-end;gap:14px;flex-wrap:nowrap;min-width:0}
.jj-nav-item{font-size:14px;padding:6px 2px;transition:color .2s;white-space:nowrap;flex-shrink:0}
.jj-nav-item:hover{color:#c9a227}
.jj-nav-item.active::after{bottom:-22px}
.jj-search{flex-shrink:0;width:190px}
}

/* ===== 首页分类区块两列 (PC) ===== */
.jj-cate-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.jj-cate-grid .jj-cate-block{margin-bottom:0}
@media (max-width: 767px){
.jj-cate-grid{grid-template-columns:1fr;gap:12px}
}

/* ===== 走势图容器自适应 (新浪图按原始比例清晰显示) ===== */
.jj-chart-area{height:auto!important;min-height:280px;display:flex;align-items:center;justify-content:center}

/* ===== 走势图容器自适应 v2 (block 居中, 避免 flex 拉伸 img) ===== */
.jj-chart-area{display:block!important;text-align:center}

/* ===== 主导航兜底: 极端窄屏仍不换行, 允许内部横向滚动 ===== */
@media (min-width: 993px) and (max-width: 1180px){
.jj-nav{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.jj-nav::-webkit-scrollbar{display:none}
}

/* ===== PC 搜索框优化 (加提交按钮) ===== */
@media (min-width: 993px){
.jj-search{width:250px;padding:4px 4px 4px 14px;border-radius:22px}
.jj-search-btn{border:none;background:linear-gradient(135deg,#d4af37,#b8860b);color:#fff;font-size:12px;font-weight:600;padding:7px 16px;border-radius:18px;cursor:pointer;flex-shrink:0;font-family:inherit;transition:opacity .2s}
.jj-search-btn:hover{opacity:.88}
.jj-search input{min-width:0}
}
@media (max-width: 992px){
.jj-search-btn{display:none}
}

/* ===== 移动端侧边栏导航 (Logo + 搜索 + 工具入口) ===== */
.jj-nav-mobile{display:none;position:fixed;top:0;left:0;width:300px;max-width:82vw;height:100vh;bottom:0;background:#fff;z-index:99999;flex-direction:column;transform:translateX(-100%);transition:transform .3s ease;overflow-y:auto;box-shadow:2px 0 20px rgba(0,0,0,.12)}
.jj-nav-mobile.active{transform:translateX(0);display:flex}
.jj-mobile-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:linear-gradient(135deg,#faf3e2,#f5e9cd);border-bottom:1px solid #efe3c6;position:sticky;top:0;z-index:2}
.jj-mobile-logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:17px;color:#333}
.jj-mobile-logo-icon{width:28px;height:28px;background:linear-gradient(135deg,#d4af37,#b8860b);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
.jj-mobile-logo-text span{color:#c9a227}
.jj-nav-close{border:none;background:none;font-size:26px;color:#999;cursor:pointer;line-height:1;padding:0 2px}
.jj-nav-close:hover{color:#333}
.jj-mobile-search{padding:12px 16px 6px}
.jj-mobile-search form{display:flex;border:1px solid #e5e5e5;border-radius:20px;padding:8px 14px;background:#f8f8f8}
.jj-mobile-search input{border:none;background:none;outline:none;flex:1;font-size:14px;color:#333;font-family:inherit}
.jj-mobile-navlist{padding:6px 16px;flex:1}
.jj-mobile-navlist .jj-nav-item{display:block;font-size:15px;padding:13px 4px;border-bottom:1px solid #f3f3f3;color:#333;text-decoration:none}
.jj-mobile-navlist .jj-nav-item.active{color:#c9a227;font-weight:600}
.jj-mobile-navlist .jj-nav-item.active::after{display:none}
.jj-mobile-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 16px;border-top:1px solid #f0f0f0;background:#fafafa}
.jj-mobile-tools a{display:block;text-align:center;font-size:13px;color:#7a6a3a;background:#f5edd8;border:1px solid #eadfc0;border-radius:8px;padding:8px 4px;text-decoration:none}
.jj-mobile-tools a:hover{background:#efe3c2}
.jj-mobile-foot{text-align:center;font-size:11px;color:#bbb;padding:12px 16px 18px}
.jj-nav-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:99998}
.jj-nav-overlay.active{display:block}
body.jj-no-scroll{overflow:hidden}
