/* ═══════════════════════════════════════════
   HEROES — 共用基础
   ═══════════════════════════════════════════ */

   .breadcrumb a{color:var(--c-accent);transition:color .2s}
   .breadcrumb a:hover{color:#7db4ff}
   .breadcrumb .sep{opacity:.35}
   
   .empty-state{
     padding:20px;
     text-align:center;
     color:var(--c-text-dim);
     font-size:.85rem;
     border-radius:8px;
     background:rgba(255,255,255,.02);
   }
   
   
   /* ═══════════════════════════════════════════
      HEROES — LIST PAGE
      ═══════════════════════════════════════════ */
   
   .breadcrumb{
     font-size:.82rem;color:var(--c-text-dim);
     margin-bottom:20px;
     display:flex;align-items:center;gap:6px;flex-wrap:wrap;
   }
   .breadcrumb a{color:var(--c-accent);transition:color .2s}
   .breadcrumb a:hover{color:#7db4ff}
   .breadcrumb .sep{color:var(--c-text-dim);opacity:.4}
   
   /* 两栏布局 */
   .layout-2col{
     display:grid;
     grid-template-columns:240px 1fr;
     gap:24px;
     align-items:start;
   }
   /* [FIX] grid 子元素防溢出 */
   .layout-2col > * {
     min-width: 0;
   }
   @media(max-width:900px){
     .layout-2col{grid-template-columns:1fr}
   }
   
   /* 侧边栏 */
   .sidebar{
     position:sticky;top:calc(var(--topbar-h) + 20px);
     display:flex;flex-direction:column;gap:16px;
   }
   .sidebar-card{
     background:var(--c-surface);
     border:1px solid var(--c-border);
     border-radius:var(--r-md);
     padding:20px;
   }
   .sidebar-card h3{
     font-size:.85rem;font-weight:700;color:var(--c-heading);
     margin-bottom:12px;
     display:flex;align-items:center;gap:8px;
   }
   .sidebar-card h3::before{
     content:'';width:3px;height:16px;border-radius:2px;
     background:var(--g-accent);flex-shrink:0;
   }
   
   /* 代数筹码 */
   .chips{display:flex;flex-wrap:wrap;gap:6px}
   .chip{
     padding:5px 14px;border-radius:99px;
     font-size:.75rem;font-weight:600;
     background:rgba(255,255,255,.05);
     color:var(--c-text-dim);
     border:1px solid var(--c-border);
     cursor:pointer;
     transition:all .25s;
     white-space:nowrap;
   }
   .chip:hover{
     background:rgba(78,140,255,.1);
     color:var(--c-accent);
     border-color:rgba(78,140,255,.25);
   }
   .chip.active{
     background:rgba(78,140,255,.18);
     color:#fff;
     border-color:rgba(78,140,255,.4);
     box-shadow:0 0 12px rgba(78,140,255,.15);
   }
   
   /* 搜索栏 */
   .search-bar{
     display:flex;gap:10px;
     margin-bottom:20px;
   }
   .search-bar input{
     flex:1;
     min-width:0; /* [FIX] flex 子元素防溢出 */
     padding:12px 18px;
     border-radius:var(--r-md);
     border:1px solid var(--c-border);
     background:var(--c-surface);
     color:var(--c-heading);
     font-size:.9rem;
     outline:none;
     transition:border-color .3s,box-shadow .3s;
     box-sizing:border-box; /* [FIX] */
   }
   .search-bar input::placeholder{color:var(--c-text-dim)}
   .search-bar input:focus{
     border-color:var(--c-accent);
     box-shadow:0 0 0 3px rgba(78,140,255,.12);
   }
   .search-bar .btn{
     padding:10px 20px;
     border-radius:var(--r-md);
     border:1px solid var(--c-border);
     background:rgba(255,255,255,.04);
     color:var(--c-text-dim);
     font-size:.82rem;font-weight:600;
     cursor:pointer;
     transition:all .25s;
     white-space:nowrap;
     flex-shrink:0; /* [FIX] 按钮不被压缩 */
   }
   .search-bar .btn:hover{
     background:rgba(255,107,107,.1);
     color:var(--c-hot);
     border-color:rgba(255,107,107,.3);
   }
   
   /* 英雄分组卡片 */
   .gen-group{
     background:var(--c-surface);
     border:1px solid var(--c-border);
     border-radius:var(--r-md);
     padding:20px 22px;
     margin-bottom:16px;
     overflow:hidden; /* [FIX] 子内容不撑开 */
   }
   .gen-title{
     font-size:1.05rem;font-weight:700;color:var(--c-heading);
     margin-bottom:16px;
     display:flex;align-items:center;gap:10px;
   }
   .gen-title .gen-badge{
     padding:3px 12px;border-radius:99px;
     font-size:.7rem;font-weight:700;
     background:var(--g-accent);
     color:#fff;
     text-transform:uppercase;
     letter-spacing:.5px;
   }
   
   /* 英雄卡片网格 */
   .hero-grid{
     display:grid;
     grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
     gap:12px;
   }
   @media(max-width:500px){
     .hero-grid{grid-template-columns:repeat(3,1fr);gap:8px}
   }
   
   .hero-card{
     position:relative;
     display:flex;flex-direction:column;align-items:center;
     padding:16px 8px 14px;
     border-radius:var(--r-md);
     background:var(--g-card);
     background-color:var(--c-surface2);
     border:1px solid var(--c-border);
     text-decoration:none;color:inherit;
     transition:transform .3s cubic-bezier(.22,1,.36,1),
                box-shadow .3s,border-color .3s;
     overflow:hidden;
   }
   .hero-card:hover{
     transform:translateY(-5px);
     box-shadow:var(--shadow-lift);
     border-color:rgba(78,140,255,.3);
   }
   .hero-card::after{
     content:'';position:absolute;inset:0;
     background:var(--g-shimmer);
     transform:translateX(-100%);
     transition:transform .6s;
     pointer-events:none;
   }
   .hero-card:hover::after{transform:translateX(100%)}
   
   .hero-card img{
     width:72px;height:72px;
     border-radius:50%;
     object-fit:cover;
     border:2px solid rgba(255,255,255,.08);
     box-shadow:0 4px 16px rgba(0,0,0,.3);
     margin-bottom:10px;
     transition:border-color .3s;
   }
   .hero-card:hover img{border-color:rgba(78,140,255,.4)}
   
   .hero-card .h-name{
     font-size:.82rem;font-weight:700;color:var(--c-heading);
     text-align:center;
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
     max-width:100%;
   }
   .hero-card .h-sub{
     font-size:.68rem;color:var(--c-text-dim);
     margin-top:3px;
   }
   
   /* 更新日志列表 */
   .changelog-list{list-style:none;padding:0;margin:0}
   .changelog-list li{
     padding:8px 0;
     border-bottom:1px solid var(--c-border);
     font-size:.8rem;line-height:1.6;
   }
   .changelog-list li:last-child{border-bottom:none}
   .changelog-list a{color:var(--c-accent)}
   .changelog-list a:hover{color:#7db4ff}
   
   
   /* ═══════════════════════════════════════════
      HEROES — 详情页
      ═══════════════════════════════════════════ */
   
   /* 详情页两栏 — 改用 grid，子元素自动 min-width:0 */
   .detail-layout{
     display:grid;
     grid-template-columns:1fr 200px;
     gap:24px;
     align-items:start;
   }
   /* [FIX] grid 子元素防溢出 */
   .detail-layout > * {
     min-width: 0;
   }
   .detail-main{min-width:0}
   
   @media(max-width:1100px){
     .detail-layout{grid-template-columns:1fr}
     .detail-toc{display:none}
   }
   
   /* ─── 英雄 Profile 头部 ─── */
   .hero-profile{
     position:relative;
     background:var(--g-hero, linear-gradient(165deg,#0f1729 0%,#162040 40%,#1b1040 100%));
     border-radius:var(--r-xl, 28px);
     padding:44px;
     overflow:hidden; /* 已有，裁剪装饰性伪元素 */
     margin-bottom:28px;
   }
   .hero-profile::before{
     content:'';position:absolute;top:-100px;right:-60px;
     width:360px;height:360px;border-radius:50%;
     background:radial-gradient(circle,rgba(78,140,255,.14) 0%,transparent 70%);
     pointer-events:none;
   }
   .hero-profile::after{
     content:'';position:absolute;bottom:-80px;left:10%;
     width:260px;height:260px;border-radius:50%;
     background:radial-gradient(circle,rgba(127,90,240,.1) 0%,transparent 70%);
     pointer-events:none;
   }
   .hero-profile-inner{
     position:relative;z-index:1;
     display:flex;align-items:center;gap:28px;
   }
   /* [FIX] flex 子元素防溢出 */
   .hero-profile-inner > * {
     min-width: 0;
   }
   .hero-avatar{
     width:110px;height:110px;
     border-radius:50%;
     object-fit:cover;
     border:3px solid rgba(255,255,255,.1);
     box-shadow:0 8px 32px rgba(0,0,0,.4);
     flex-shrink:0;
   }
   .hero-info{flex:1;min-width:0}
   .hero-info h1{
     font-size:1.5rem;font-weight:800;color:#fff;
     margin:0 0 12px;line-height:1.35;
     overflow-wrap:break-word; /* [FIX] 长标题换行 */
     word-break:break-word;    /* [FIX] */
   }
   .hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
   .hero-pill{
     padding:5px 14px;border-radius:99px;
     font-size:.72rem;font-weight:600;
     background:rgba(255,255,255,.06);
     color:var(--c-text);
     border:1px solid var(--c-border);
     display:inline-flex;align-items:center;gap:4px;
   }
   .hero-pill b{color:var(--c-heading)}
   .hero-desc{
     font-size:.85rem;color:var(--c-text-dim);
     line-height:1.7;max-width:560px;margin:0;
     overflow-wrap:break-word; /* [FIX] */
   }
   
   @media(max-width:640px){
     .hero-profile{padding:28px 20px;border-radius:20px}
     .hero-profile-inner{flex-direction:column;text-align:center}
     .hero-avatar{width:90px;height:90px}
     .hero-info h1{font-size:1.2rem}
     .hero-pills{justify-content:center}
     .hero-desc{max-width:100%}
   }
   
   /* ─── 属性网格 ─── */
   .stat-grid{
     display:grid;
     grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
     gap:16px;
     margin-bottom:24px;
   }
   .stat-card{
     background:var(--c-surface);
     border:1px solid var(--c-border);
     border-radius:var(--r-md, 14px);
     padding:22px 24px;
     overflow:hidden; /* [FIX] */
   }
   .stat-card h2{
     font-size:.9rem;font-weight:700;color:var(--c-heading);
     margin:0 0 16px;
     display:flex;align-items:center;gap:8px;
   }
   .stat-icon{font-size:1.1rem}
   .stat-row{
     display:flex;justify-content:space-between;align-items:center;
     padding:9px 0;
     border-bottom:1px solid rgba(255,255,255,.04);
     font-size:.85rem;
   }
   .stat-row:last-child{border-bottom:none}
   .stat-row span{color:var(--c-text-dim)}
   .stat-row b{color:var(--c-heading);font-weight:700;font-size:.9rem}
   
   /* ─── 技能区块 ─── */
   .skill-section{
     background:var(--c-surface);
     border:1px solid var(--c-border);
     border-radius:var(--r-md, 14px);
     padding:24px;
     margin-bottom:24px;
     overflow:hidden; /* [FIX] 防止技能描述溢出 */
   }
   .skill-section > h2{
     font-size:1.05rem;font-weight:700;color:var(--c-heading);
     margin:0 0 18px;
     display:flex;align-items:center;gap:10px;
   }
   .skill-section > h2::before{
     content:'';width:4px;height:20px;border-radius:3px;
     background:var(--g-accent, linear-gradient(135deg,#4e8cff,#7f5af0));
     flex-shrink:0;
   }
   
   /* Tabs */
   .tabs{
     display:inline-flex;gap:4px;
     margin-bottom:20px;
     background:rgba(255,255,255,.03);
     border-radius:8px;
     padding:4px;
   }
   .tab-btn{
     padding:9px 24px;
     border-radius:6px;
     border:none;
     background:transparent;
     color:var(--c-text-dim);
     font-size:.82rem;font-weight:600;
     cursor:pointer;
     transition:all .25s;
   }
   .tab-btn:hover{color:var(--c-heading)}
   .tab-btn.active{
     background:rgba(78,140,255,.15);
     color:#fff;
     box-shadow:0 2px 8px rgba(78,140,255,.1);
   }
   
   /* 技能条目 */
   .skill-item{
     display:flex;gap:14px;
     padding:16px;
     border-radius:10px;
     background:rgba(255,255,255,.02);
     border:1px solid rgba(255,255,255,.04);
     margin-bottom:10px;
     transition:background .2s;
   }
   .skill-item:hover{background:rgba(255,255,255,.04)}
   .skill-item:last-child{margin-bottom:0}
   
   .skill-icon{
     width:48px;height:48px;
     border-radius:12px;
     object-fit:cover;
     flex-shrink:0;
     border:1px solid rgba(255,255,255,.08);
     background:var(--c-surface2);
   }
   .skill-body{
     flex:1;
     min-width:0; /* [FIX] flex 子元素防溢出 */
   }
   .skill-body h3{
     font-size:.9rem;font-weight:700;color:var(--c-heading);
     margin:0 0 6px;
     overflow-wrap:break-word; /* [FIX] */
   }
   .skill-body p{
     font-size:.82rem;color:var(--c-text);
     line-height:1.75;margin:0;
     overflow-wrap:break-word; /* [FIX] */
   }
   .skill-inc{
     margin-top:10px;
     padding:9px 14px;
     border-radius:8px;
     background:rgba(78,140,255,.06);
     border:1px solid rgba(78,140,255,.1);
     font-size:.75rem;color:var(--c-accent);
     line-height:1.65;
     overflow-wrap:break-word; /* [FIX] */
   }
   
   /* 天赋分隔 */
   .talent-divider{
     margin:24px 0 16px;
     font-size:.95rem;font-weight:700;color:var(--c-heading);
     display:flex;align-items:center;gap:10px;
   }
   .talent-divider::after{
     content:'';flex:1;height:1px;
     background:var(--c-border);
   }
   
   /* ─── 专属武器 ─── */
   .weapon-section{
     background:var(--c-surface);
     border:1px solid var(--c-border);
     border-radius:var(--r-md, 14px);
     padding:24px;
     margin-bottom:24px;
     overflow:hidden; /* [FIX] */
   }
   .weapon-section > h2{
     font-size:1.05rem;font-weight:700;color:var(--c-heading);
     margin:0 0 20px;
     display:flex;align-items:center;gap:10px;
   }
   .weapon-section > h2::before{
     content:'';width:4px;height:20px;border-radius:3px;
     background:linear-gradient(135deg,var(--c-gold, #ffc857),#ff9a3c);
     flex-shrink:0;
   }
   .weapon-grid{
     display:grid;
     grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
     gap:16px;
   }
   /* [FIX] grid 子元素防溢出 */
   .weapon-grid > * {
     min-width: 0;
   }
   .weapon-card{
     background:rgba(255,255,255,.03);
     border:1px solid var(--c-border);
     border-radius:10px;
     padding:20px;
     overflow:hidden; /* [FIX] */
   }
   .weapon-card h3{
     font-size:.85rem;font-weight:700;color:var(--c-heading);
     margin:0 0 14px;
     display:flex;align-items:center;gap:8px;
   }
   .weapon-name-row{
     display:flex;align-items:center;gap:12px;
     margin-bottom:8px;
   }
   .weapon-name-row img{
     width:48px;height:48px;
     border-radius:12px;
     border:1px solid rgba(255,255,255,.08);
     object-fit:cover;
     flex-shrink:0;
   }
   .weapon-name-row .name{
     font-size:1.05rem;font-weight:800;color:var(--c-heading);
     overflow-wrap:break-word; /* [FIX] */
     min-width:0; /* [FIX] */
   }
   .weapon-parts{
     font-size:.75rem;color:var(--c-text-dim);
     margin-top:8px;line-height:1.6;
   }
   .weapon-card .stat-row{padding:8px 0;font-size:.84rem}
   
   /* 专武技能子区块 */
   .weapon-skill-block{margin-bottom:16px}
   .weapon-skill-block:last-child{margin-bottom:0}
   .weapon-skill-label{
     font-size:.7rem;
     color:var(--c-text-dim);
     margin-bottom:8px;
     font-weight:600;
     letter-spacing:.5px;
     text-transform:uppercase;
   }
   .weapon-skill-row{
     display:flex;align-items:center;gap:12px;
     margin-bottom:6px;
   }
   .weapon-skill-row img{
     width:40px;height:40px;
     border-radius:12px;
     border:1px solid rgba(255,255,255,.08);
     object-fit:cover;
     flex-shrink:0;
   }
   .weapon-skill-row .name{
     font-size:.9rem;font-weight:800;color:var(--c-heading);
     min-width:0; /* [FIX] */
     overflow-wrap:break-word; /* [FIX] */
   }
   .weapon-skill-effect{
     font-size:.8rem;color:var(--c-text-dim);
     line-height:1.75;margin:6px 0 0;
     overflow-wrap:break-word; /* [FIX] */
   }
   
   /* ─── 碎片表 ─── */
   .shard-section{
     background:var(--c-surface);
     border:1px solid var(--c-border);
     border-radius:var(--r-md, 14px);
     padding:24px;
     margin-bottom:24px;
   }
   .shard-section > h2{
     font-size:1.05rem;font-weight:700;color:var(--c-heading);
     margin:0 0 20px;
     display:flex;align-items:center;gap:10px;
   }
   .shard-section > h2::before{
     content:'';width:4px;height:20px;border-radius:3px;
     background:linear-gradient(135deg,var(--c-accent2, #7f5af0),#c77dff);
     flex-shrink:0;
   }
   .shard-table-wrap{
     overflow-x:auto;
     -webkit-overflow-scrolling:touch; /* [FIX] 确保 iOS 顺滑滚动 */
     border-radius:10px;
     border:1px solid var(--c-border);
   }
   .shard-table{
     width:100%;
     border-collapse:collapse;
     font-size:.82rem;
   }
   .shard-table th{
     padding:12px 16px;
     text-align:center;
     font-weight:700;
     color:var(--c-heading);
     background:rgba(255,255,255,.04);
     border-bottom:1px solid var(--c-border);
     white-space:nowrap;
   }
   .shard-table td{
     padding:10px 16px;
     text-align:center;
     color:var(--c-text);
     border-bottom:1px solid rgba(255,255,255,.03);
   }
   .shard-table tbody tr:hover{background:rgba(78,140,255,.04)}
   .shard-table .tier-cell{
     font-weight:800;color:var(--c-heading);
     text-align:left;
   }
   .shard-table .total-row td{
     font-weight:700;
     color:var(--c-gold, #ffc857);
     background:rgba(255,200,87,.04);
     border-top:2px solid rgba(255,200,87,.15);
     border-bottom:none;
   }
   .star-icon{
     width:14px;height:14px;
     vertical-align:-2px;
     margin-left:2px;
     display:inline-block;
   }
   
   /* ─── 右侧 TOC ─── */
   .detail-toc{
     position:sticky;
     top:calc(var(--topbar-h, 64px) + 20px);
     max-height:calc(100vh - var(--topbar-h, 64px) - 40px);
     overflow-y:auto;
   }
   .detail-toc::-webkit-scrollbar{width:3px}
   .detail-toc::-webkit-scrollbar-track{background:transparent}
   .detail-toc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:99px}
   
   .toc-card{
     background:var(--c-surface);
     border:1px solid var(--c-border);
     border-radius:var(--r-md, 14px);
     padding:16px;
   }
   .toc-title{
     font-size:.72rem;font-weight:700;
     color:var(--c-text-dim);
     text-transform:uppercase;letter-spacing:.8px;
     margin-bottom:12px;
     display:flex;align-items:center;gap:6px;
   }
   .toc-title svg{opacity:.5}
   .toc-link{
     display:block;
     padding:6px 10px;border-radius:6px;
     text-decoration:none;
     font-size:.78rem;font-weight:500;
     color:var(--c-text-dim);
     transition:all .2s;
     margin-bottom:2px;
   }
   .toc-link:hover{
     background:rgba(255,255,255,.05);
     color:var(--c-heading);
   }
   .toc-link.active{
     background:rgba(78,140,255,.1);
     color:var(--c-accent);
     font-weight:700;
   }
   .toc-divider{
     border:none;
     border-top:1px solid rgba(255,255,255,.06);
     margin:14px 0 12px;
   }
   
   /* 返回按钮 */
   .back-btn{
     display:inline-flex;align-items:center;gap:6px;
     padding:8px 18px;border-radius:99px;
     font-size:.78rem;font-weight:600;
     color:var(--c-text-dim);
     background:rgba(255,255,255,.04);
     border:1px solid var(--c-border);
     text-decoration:none;
     transition:all .25s;
     margin-top:8px;
   }
   .back-btn:hover{
     background:rgba(78,140,255,.1);
     color:var(--c-accent);
     border-color:rgba(78,140,255,.2);
   }
   
   /* 详情页入场动画 */
   @keyframes detailFadeUp{
     from{opacity:0;transform:translateY(20px)}
     to{opacity:1;transform:translateY(0)}
   }
   .anim-section{animation:detailFadeUp .45s ease both}
   .anim-section:nth-child(2){animation-delay:.08s}
   .anim-section:nth-child(3){animation-delay:.16s}
   .anim-section:nth-child(4){animation-delay:.24s}
   .anim-section:nth-child(5){animation-delay:.32s}
   .anim-section:nth-child(6){animation-delay:.4s}
   
   /* [FIX] 移动端额外适配 */
   @media (max-width: 768px) {
     .skill-item {
       flex-direction: column;
       align-items: flex-start;
       gap: 10px;
     }
     .skill-icon {
       width: 40px; height: 40px;
     }
     .weapon-grid {
       grid-template-columns: 1fr;
     }
     .stat-grid {
       grid-template-columns: 1fr;
     }
     .hero-profile {
       padding: 24px 18px;
     }
     .skill-section,
     .weapon-section,
     .shard-section {
       padding: 20px 16px;
     }
   }
   /* 技能描述中的数值高亮 {v1} {v2} … */
.inc{
  display:inline;
  padding:2px 8px;
  margin:0 2px;
  border-radius:5px;
  background:rgba(78,140,255,.1);
  color:var(--c-accent);
  font-weight:700;
  font-size:.82em;
  white-space:nowrap;
  border:1px solid rgba(78,140,255,.15);
  letter-spacing:.3px;
}

/* 专武技能里的也适配 */
/* .weapon-skill-effect .inc{
  font: size 0.85em;
} */
.weapon-skill-effect .inc{
  font-size:.0.85em;
}