/* ==========================================================
   首页样式 — Coinbase Blue 设计语言
   主色: #0052ff  画布: #ffffff  深色画布: #0a0b0d
   字体: Inter (display/body) · JetBrains Mono (number)
   说明: 仅替换首页视觉, 不改变模板文案
========================================================== */

:root{
  --cb-primary:        #0052ff;
  --cb-primary-active: #003ecc;
  --cb-canvas:         #ffffff;
  --cb-surface-soft:   #f7f7f7;
  --cb-surface-strong: #eef0f3;
  --cb-surface-dark:   #0a0b0d;
  --cb-surface-dark-elev:#16181c;
  --cb-hairline:       #dee1e6;
  --cb-hairline-soft:  #eef0f3;
  --cb-ink:            #0a0b0d;
  --cb-body:           #5b616e;
  --cb-muted:          #7c828a;
  --cb-on-dark:        #ffffff;
  --cb-on-dark-soft:   #a8acb3;
  --cb-up:             #05b169;
  --cb-down:           #cf202f;
  --cb-accent-yellow:  #f4b000;
  --cb-radius-md:  12px;
  --cb-radius-lg:  16px;
  --cb-radius-xl:  24px;
  --cb-radius-pill:100px;
  --cb-shadow-soft: 0 4px 12px rgba(0,0,0,.04);
  --cb-section-pad: 96px;
}

/* ---------- 基础 ---------- */
html, body{ background: var(--cb-canvas); }
body{
  padding-top: 64px;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--cb-ink);
  font-family: "Inter","CoinbaseSans",-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{ color: var(--cb-primary); }
a:hover{ text-decoration: none; }

/* ---------- 顶部导航 (覆写 layout 的 navbar-inverse) ---------- */
.navbar{ min-height: 64px; margin-bottom: 0; }
.navbar-inverse{
  background: var(--cb-canvas);
  border: none;
  border-bottom: 1px solid var(--cb-hairline);
  box-shadow: none;
}
.navbar-inverse .navbar-brand{
  padding: 14px 0 14px 0;
  height: 64px;
  color: var(--cb-ink);
  font-weight: 700;
  letter-spacing: -.3px;
}
.navbar-inverse .navbar-brand img{
  height: 36px;
  width: auto;
  /* 原 logo 为白色, 在白色导航栏上不可见; 反相为深色 */
  filter: brightness(0);
}
.navbar-inverse .navbar-nav > li > a{
  color: var(--cb-ink);
  font-size: 14px;
  font-weight: 500;
  padding: 22px 14px;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus{
  color: var(--cb-primary);
  background: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus{
  color: var(--cb-primary);
  background: transparent;
}
.navbar-inverse .navbar-nav .dropdown:hover > a{
  color: var(--cb-primary);
  background: transparent;
}
.navbar-inverse .navbar-toggle{
  border-color: var(--cb-hairline);
  margin-top: 14px;
}
.navbar-inverse .navbar-toggle .icon-bar{ background: var(--cb-ink); }
.navbar-inverse .dropdown-menu{
  border: 1px solid var(--cb-hairline);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-soft);
  padding: 8px;
}
.navbar-inverse .dropdown-menu > li > a{
  border-radius: 8px;
  font-size: 14px;
  color: var(--cb-ink);
  padding: 10px 12px;
}
.navbar-inverse .dropdown-menu > li > a:hover{
  background: var(--cb-surface-soft);
  color: var(--cb-primary);
}
.navbar .form-control{
  height: 40px;
  border-radius: var(--cb-radius-pill);
  background: var(--cb-surface-strong);
  border: none;
  font-size: 14px;
  padding: 0 18px;
  box-shadow: none;
}
.navbar .form-control:focus{
  background: #fff;
  border: 2px solid var(--cb-primary);
  outline: none;
}

/* ---------- 容器 ---------- */
.cb-container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 通用按钮 ---------- */
.cb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--cb-radius-pill);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
  border: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.cb-btn--primary{ background: var(--cb-primary); color: #fff; }
.cb-btn--primary:hover{ background: var(--cb-primary-active); color:#fff; }
.cb-btn--lg{ height: 56px; padding: 0 32px; }
.cb-btn--ghost-dark{
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.4);
}
.cb-btn--ghost-dark:hover{ background: rgba(255,255,255,.08); color:#fff; }
.cb-link{
  color: var(--cb-primary);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.cb-link:hover{ color: var(--cb-primary-active); text-decoration: none; }

/* ---------- Badge ---------- */
.cb-badge{
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255,255,255,.08);
  color: var(--cb-on-dark-soft);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--cb-radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* ==========================================================
   HERO 暗色全屏 + 浮层卡片
========================================================== */
.cb-hero{
  position: relative;
  background: var(--cb-surface-dark);
  color: var(--cb-on-dark);
  overflow: hidden;
  padding: 80px 0 96px;
  margin-top: -64px;            /* 让导航与 hero 同色域上下贴合 */
  padding-top: 144px;           /* 64 nav + 80 内边距 */
}
.cb-hero__bg{
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 500px at 80% 0%, rgba(0,82,255,.28), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(0,82,255,.12), transparent 60%);
  pointer-events: none;
}
.cb-hero__inner{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}
.cb-hero__copy{ position: relative; z-index: 2; }
.cb-display{
  font-size: 72px;
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -1.8px;
  margin: 0 0 20px;
  color: #fff;
}
.cb-num-accent{
  font-family: "JetBrains Mono","CoinbaseMono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight: 500;
  color: var(--cb-primary);
  letter-spacing: -1px;
}
.cb-hero__lead{
  font-size: 18px;
  color: var(--cb-on-dark-soft);
  margin: 0 0 28px;
  line-height: 1.5;
}

/* 搜索 */
.cb-search{
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cb-canvas);
  border-radius: var(--cb-radius-pill);
  padding: 6px;
  max-width: 540px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.cb-search__input{
  flex: 1;
  height: 48px;
  border: none;
  outline: none;
  padding: 0 20px;
  border-radius: var(--cb-radius-pill);
  font-size: 16px;
  background: transparent;
  color: var(--cb-ink);
}
.cb-search__input::placeholder{ color: var(--cb-muted); }
.cb-search .cb-btn{ height: 48px; padding: 0 24px; }
.cb-search--center{ margin: 0 auto; }

/* 热门工具 */
.cb-hot{ margin-top: 32px; }
.cb-hot__label{
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--cb-on-dark-soft);
  margin-right: 12px;
  margin-bottom: 8px;
}
.cb-hot__chips{ display: inline-flex; flex-wrap: wrap; gap: 8px; vertical-align: middle; }
.cb-chip{
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  border-radius: var(--cb-radius-pill);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.cb-chip:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}

/* 浮层模拟卡片 */
.cb-hero__mock{
  position: relative;
  height: 460px;
}
.cb-mock{
  position: absolute;
  background: var(--cb-surface-dark-elev);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--cb-radius-xl);
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.cb-mock--back{
  top: 20px; right: 0;
  width: 360px;
  transform: rotate(3deg);
}
.cb-mock--front{
  bottom: 0; left: 20px;
  width: 320px;
  transform: rotate(-4deg);
  background: linear-gradient(180deg, #1c1f24 0%, #14161a 100%);
}
.cb-mock__head{
  display: flex; gap: 6px; margin-bottom: 16px;
}
.cb-mock__dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.16);
}
.cb-mock__row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 14px;
  color: var(--cb-on-dark);
}
.cb-mock__row:first-of-type{ border-top: none; }
.cb-mock__asset{ display: inline-flex; align-items: center; gap: 10px; }
.cb-asset-icon{
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color:#fff;
  background: var(--cb-primary);
}
.cb-asset-icon{ background: var(--cb-surface-strong); overflow: hidden; }
.cb-asset-icon img{ width: 18px; height: 18px; border-radius: 4px; display: block; }
.cb-mock__name{
  font-size: 14px;
  font-weight: 500;
  color: var(--cb-on-dark);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-mock__row .cb-mono{ color: var(--cb-on-dark-soft); }
.cb-mono{
  font-family: "JetBrains Mono","CoinbaseMono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight: 500;
  font-size: 14px;
}
.cb-up{ color: var(--cb-up); }
.cb-down{ color: var(--cb-down); }

.cb-mock__title{
  font-size: 14px; font-weight: 600;
  color: var(--cb-on-dark);
  margin-bottom: 14px;
}
.cb-mock__grid{
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
}
.cb-mock__cell{
  aspect-ratio: 1/1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-mock__cell img{
  width: 50%;
  height: 50%;
  object-fit: contain;
  border-radius: 6px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

/* ==========================================================
   通用 Section
========================================================== */
.cb-section{
  padding: var(--cb-section-pad) 0;
  background: var(--cb-canvas);
}
.cb-section--soft{ background: var(--cb-surface-soft); }
.cb-section--dark{ background: var(--cb-surface-dark); color: var(--cb-on-dark); }

.cb-section__head{
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 40px;
  gap: 16px;
  flex-wrap: wrap;
}
.cb-h2{
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 0;
  color: var(--cb-ink);
}

/* ==========================================================
   工具卡片 (覆写 item_gjproduct 的 .black_box)
========================================================== */
.cb-grid .black_box{ margin-bottom: 24px; }
.black_box .box_01{
  position: relative;
  background: var(--cb-canvas);
  border: 1px solid var(--cb-hairline);
  border-radius: var(--cb-radius-xl);
  padding: 28px 24px 20px;
  margin-bottom: 0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
  display: flex; flex-direction: column;
}
.cb-section--soft .black_box .box_01{ background: #fff; }
.black_box .box_01:hover{
  box-shadow: var(--cb-shadow-soft);
  border-color: #cfd4dc;
  transform: translateY(-2px);
}

/* 角标 (类型/费用) */
.black_box .box_01 .biaozhi{
  position: absolute;
  top: 16px; right: 16px;
  height: 24px;
  line-height: 24px;
  padding: 0 10px;
  width: auto;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--cb-ink);
  background: var(--cb-surface-strong);
  border-radius: var(--cb-radius-pill);
}
.black_box .box_01 .mianfei{ background: rgba(5,177,105,.12); color: var(--cb-up); }
.black_box .box_01 .shoufei{ background: rgba(0,82,255,.10); color: var(--cb-primary); }
.black_box .box_01 .gongju{ background: rgba(0,82,255,.10); color: var(--cb-primary); }
.black_box .box_01 .guanggao{ background: rgba(207,32,47,.10); color: var(--cb-down); }

/* 图标圆 */
.black_box .box_01 .icon{
  width: 56px; height: 56px;
  margin: 4px 0 16px;
  background: var(--cb-surface-strong) !important;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.black_box .box_01 .icon center,
.black_box .box_01 .icon center img{ display: inline-block; }
.black_box .box_01 .icon img{
  width: 32px !important; height: 32px !important;
  border-radius: 6px;
}

/* 标题 / 描述 */
.black_box .box_01 .title_h4{
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  color: var(--cb-ink);
  padding: 0;
  margin-bottom: 8px;
  line-height: 1.33;
}
.black_box .box_01 .title_h4 a{ color: var(--cb-ink); }
.black_box .box_01 .title_h4 a:hover{ color: var(--cb-primary); }

.black_box .box_01 p{
  color: var(--cb-body);
  font-size: 14px;
  line-height: 1.6;
  width: 100%;
  margin: 0 0 16px;
  text-align: left;
  height: auto;
  max-height: 4.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  flex: 1;
}

/* "开始使用" 按钮 — Coinbase 蓝色胶囊 */
.black_box .box_01 .btn_sy{
  width: 100%;
  margin: 0 0 12px;
  height: 40px; line-height: 40px;
  border: none;
  border-radius: var(--cb-radius-pill);
  background: var(--cb-surface-strong);
  text-align: center;
  transition: background-color .15s ease, color .15s ease;
}
.black_box .box_01 .btn_sy a{
  color: var(--cb-ink);
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.black_box .box_01 .btn_sy:hover{
  background: var(--cb-primary);
  border: none;
}
.black_box .box_01 .btn_sy:hover a{ color: #fff; }

/* 使用次数 */
.black_box .box_01 .renshu{
  width: 100%;
  height: auto;
  line-height: 1.4;
  border-top: 1px solid var(--cb-hairline-soft);
  margin-top: auto;
  padding-top: 14px;
  color: var(--cb-muted);
  font-size: 12px;
}
.black_box .box_01 .renshu .magin{ width: 100%; margin: 0; }
.black_box .box_01 .renshu span{
  background: transparent;
  color: var(--cb-ink);
  font-family: "JetBrains Mono","CoinbaseMono",ui-monospace,SFMono-Regular,monospace;
  font-weight: 500;
  font-size: 13px;
  padding: 0;
  margin: 0 4px;
  border-radius: 0;
}

/* "更多" 按钮 (覆盖 .moer_01) */
.moer_01{
  text-align: center;
  width: auto;
  margin: 32px auto 0;
  height: auto;
  line-height: 1;
}
.moer_01 a{
  display: inline-flex;
  align-items: center; justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--cb-radius-pill);
  border: 1px solid var(--cb-hairline);
  color: var(--cb-ink);
  font-size: 14px;
  font-weight: 600;
}
.moer_01 a:hover{
  background: var(--cb-ink);
  color: #fff;
  border-color: var(--cb-ink);
  border-radius: var(--cb-radius-pill);
}

/* ==========================================================
   资讯列表
========================================================== */
.cb-news-grid{ margin: 0 -12px; }
.cb-news-grid > .col-md-6{ padding: 12px; }
.cb-news-card{
  background: var(--cb-canvas);
  border: 1px solid var(--cb-hairline);
  border-radius: var(--cb-radius-xl);
  padding: 32px;
  height: 100%;
}
.cb-news-card__head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cb-news-card__head h3{
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--cb-ink);
  letter-spacing: -.3px;
}
.cb-news-card__head h3 a{ color: var(--cb-ink); }
.cb-news-card__head h3 a:hover{ color: var(--cb-primary); }
.cb-news-list{ list-style: none; padding: 0; margin: 0; }
.cb-news-list li{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--cb-hairline-soft);
  font-size: 14px;
}
.cb-news-list li:first-child{ border-top: none; }
.cb-news-list li a{
  color: var(--cb-ink);
  font-size: 15px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-news-list li a:hover{ color: var(--cb-primary); }
.cb-news-list__meta{
  font-family: "JetBrains Mono","CoinbaseMono",ui-monospace,SFMono-Regular,monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--cb-muted);
  flex-shrink: 0;
}

/* 老 .xwlist 类（兼容备份模板）*/
.xwlist{
  background: var(--cb-canvas);
  border: 1px solid var(--cb-hairline);
  border-radius: var(--cb-radius-xl);
  padding: 32px;
  margin-bottom: 24px;
}
.xwlist h3{
  color: var(--cb-ink);
  text-align: left;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 16px;
  letter-spacing: -.3px;
}
.xwlist ul li{ list-style: none; line-height: 2.4; border-top: 1px solid var(--cb-hairline-soft); }
.xwlist ul li:first-child{ border-top: none; }
.xwlist ul li span{
  float: right;
  color: var(--cb-muted);
  font-family: "JetBrains Mono",ui-monospace,monospace;
  font-size: 12px;
}
.xwlist ul li a{ color: var(--cb-ink); font-size: 15px; }
.xwlist ul li a:hover{ color: var(--cb-primary); text-decoration: none; }
.xwul{ padding: 0; margin: 0; }

/* ==========================================================
   友情链接
========================================================== */
.j-partner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px;
  border-top: 1px solid var(--cb-hairline);
}
.j-partner .list-links{
  font-size: 13px;
  color: var(--cb-muted);
  line-height: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.j-partner .list-links::before{
  content: "";
}
.j-partner .list-links a{
  color: var(--cb-body);
  font-size: 13px;
  text-decoration: none;
  transition: color .15s ease;
}
.j-partner .list-links a:hover{
  color: var(--cb-primary);
}

/* ==========================================================
   页脚
========================================================== */
#footer{
  background: var(--cb-canvas);
  border-top: 1px solid var(--cb-hairline);
  padding: 48px 0 32px;
  color: var(--cb-muted);
  font-size: 13px;
}
#footer a{
  color: var(--cb-body);
  text-decoration: none;
}
#footer a:hover{
  color: var(--cb-primary);
}
#footer .footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
#footer .links{
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
}
#footer .links li a{
  font-size: 14px;
  color: var(--cb-ink);
  font-weight: 500;
}
#footer .copyright,
#footer p{
  font-size: 12px;
  color: var(--cb-muted);
  margin: 8px 0 0;
  line-height: 1.6;
}

/* ==========================================================
   预页脚 CTA Band
========================================================== */
.cb-cta{
  background: var(--cb-surface-dark);
  color: var(--cb-on-dark);
  padding: 96px 0;
  text-align: center;
}
.cb-cta__title{
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 0 0 12px;
}
.cb-cta__sub{
  color: var(--cb-on-dark-soft);
  font-size: 16px;
  margin: 0 0 32px;
}
.cb-cta .cb-search{ margin: 0 auto; }

/* ==========================================================
   兼容: top_gj 备份模板继续可用 (轻量样式)
========================================================== */
.top_gj{ display: none; }

/* ==========================================================
   响应式
========================================================== */
@media (max-width: 1024px){
  .cb-hero__inner{ grid-template-columns: 1fr; gap: 32px; }
  .cb-hero__mock{ display: none; }
  .cb-display{ font-size: 56px; letter-spacing: -1.4px; }
}
@media (max-width: 768px){
  body{ padding-top: 56px; }
  .navbar{ min-height: 56px; }
  .navbar-inverse .navbar-brand{ height: 56px; padding: 12px 0; }
  .navbar-inverse .navbar-brand img{ height: 28px; }
  .cb-hero{ padding: 96px 0 64px; margin-top: -56px; padding-top: 120px; }
  .cb-display{ font-size: 36px; letter-spacing: -.6px; }
  .cb-hero__lead{ font-size: 16px; }
  .cb-section{ padding: 64px 0; }
  .cb-h2{ font-size: 32px; letter-spacing: -.6px; }
  .cb-cta{ padding: 64px 0; }
  .cb-cta__title{ font-size: 32px; letter-spacing: -.6px; }
  .cb-search{ flex-direction: row; padding: 4px; }
  .cb-search__input{ height: 44px; font-size: 14px; padding: 0 14px; }
  .cb-search .cb-btn{ height: 44px; padding: 0 16px; font-size: 14px; }
  .cb-news-grid > .col-md-6{ width: 100%; }
}
@media (max-width: 480px){
  .cb-display{ font-size: 30px; }
  .cb-container{ padding: 0 16px; }
}

/* ==========================================================
   ============== 内页通用样式 (Coinbase Blue) ==============
   适配 channel / list / show / page / search / tags / special
   不修改任何 HTML 模板, 仅通过类名覆写实现统一视觉
========================================================== */

/* 内页主容器 */
#content-container{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

/* ---------- 分类大标题 ---------- */
.category-title,
#content-container > .text-center.h1{
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -.6px;
  line-height: 1.2;
  color: var(--cb-ink);
  margin: 16px 0 32px;
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.category-title .more.pull-right{
  margin-left: auto;
  float: none !important;
}

/* ---------- 面包屑 ---------- */
.breadcrumb{
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--cb-muted);
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.breadcrumb > li{ color: var(--cb-muted); }
.breadcrumb > li + li::before{
  color: var(--cb-muted);
  padding: 0 8px;
  content: "/";
}
.breadcrumb > li > a{ color: var(--cb-body); }
.breadcrumb > li > a:hover{ color: var(--cb-primary); }
.breadcrumb > .active{ color: var(--cb-ink); }

/* ---------- Panel (Bootstrap) → Coinbase Card ---------- */
.panel,
.panel-default{
  background: var(--cb-canvas);
  border: 1px solid var(--cb-hairline);
  border-radius: var(--cb-radius-xl);
  box-shadow: none;
  margin-bottom: 24px;
  overflow: hidden;
}
.panel-heading{
  background: transparent;
  border-bottom: 1px solid var(--cb-hairline-soft);
  padding: 20px 28px;
  border-radius: 0;
  color: var(--cb-ink);
}
.panel-default > .panel-heading{
  background: transparent;
  border-color: var(--cb-hairline-soft);
  color: var(--cb-ink);
}
.panel-title{
  font-size: 18px;
  font-weight: 600;
  color: var(--cb-ink);
  letter-spacing: -.2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.panel-title small{
  font-size: 13px;
  font-weight: 400;
  color: var(--cb-muted);
}
.panel-body{
  padding: 24px 28px;
  background: var(--cb-canvas);
}
.panel-body.py-0{ padding-top: 0; padding-bottom: 0; }

/* 侧栏广告位 panel 去边框 */
.panel.panel-blockimg{
  border: none;
  background: transparent;
  border-radius: var(--cb-radius-xl);
  overflow: hidden;
  padding: 0;
}
.panel.panel-blockimg img{
  width: 100%;
  border-radius: var(--cb-radius-xl);
  display: block;
}

/* panel-heading 内 .more 排序 */
.panel-heading .more{
  margin-left: auto;
}
.category-order{
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.category-order > li{
  list-style: none;
  display: inline-block;
}
.category-order > li > a{
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--cb-radius-pill);
  font-size: 13px;
  color: var(--cb-body);
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.category-order > li > a:hover{
  background: var(--cb-surface-soft);
  color: var(--cb-ink);
}
.category-order > li > a.active{
  background: var(--cb-ink);
  color: #fff;
}

/* ---------- 文章列表 (.article-list / .media) ---------- */
.article-list .article-item{
  padding: 24px 0;
  border-bottom: 1px solid var(--cb-hairline-soft);
}
.article-list .article-item:last-child{ border-bottom: none; }

.article-list .media{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 0;
}
.article-list .media-left{
  flex: 0 0 200px;
  max-width: 200px;
  padding-right: 0;
}
.article-list .media-left a{
  display: block;
  border-radius: var(--cb-radius-lg);
  overflow: hidden;
  background: var(--cb-surface-soft);
}
.article-list .media-left img{
  width: 100%;
  height: auto;
  display: block;
}
.article-list .media-body{
  flex: 1;
  min-width: 0;
}
.article-title{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.3px;
  margin: 0 0 12px;
  line-height: 1.35;
}
.article-title a{ color: var(--cb-ink); }
.article-title a:hover{ color: var(--cb-primary); }

.article-intro{
  font-size: 14px;
  line-height: 1.6;
  color: var(--cb-body);
  margin: 0 0 12px;
}
.article-tag{
  font-size: 12px;
  color: var(--cb-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.article-tag i{ margin-right: 2px; }
.article-tag a{ color: var(--cb-body); }
.article-tag a:hover{ color: var(--cb-primary); }

/* tag 胶囊 */
.tag{
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  background: var(--cb-surface-strong);
  color: var(--cb-ink);
  border-radius: var(--cb-radius-pill);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  margin-right: 4px;
}
.tag-primary{
  background: rgba(0,82,255,.10);
  color: var(--cb-primary);
}
.tag:hover{ background: var(--cb-primary); color: #fff; }

/* 频道短列表 (.inner-list) */
.inner-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.inner-list li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--cb-hairline-soft);
  font-size: 14px;
}
.inner-list li:first-child{ border-top: none; }
.inner-list li a,
.inner-list li > *:first-child{
  color: var(--cb-ink);
  text-decoration: none;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inner-list li a:hover{ color: var(--cb-primary); }
.inner-list li .pull-right{
  float: none !important;
  font-family: "JetBrains Mono",ui-monospace,monospace;
  font-size: 12px;
  color: var(--cb-muted);
  flex-shrink: 0;
}

/* channel 子栏目卡片 (.channel-list h3) */
.channel-list h3{
  font-size: 18px;
  font-weight: 600;
  color: var(--cb-ink);
  letter-spacing: -.2px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cb-hairline-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.channel-list h3 em{
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
}
.channel-list h3 em a{
  color: var(--cb-primary);
  text-decoration: none;
}
.channel-list .media{
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.channel-list .media-left{
  flex: 0 0 80px;
}
.channel-list .media-left .embed-responsive{
  border-radius: var(--cb-radius-md);
  overflow: hidden;
  background: var(--cb-surface-soft);
}
.channel-list .media-heading{
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--cb-ink);
}
.channel-list .media-body p{
  font-size: 13px;
  color: var(--cb-body);
  line-height: 1.5;
  margin: 0;
}

/* ---------- 筛选 tabs ---------- */
.tabs-wrapper{ display: flex; flex-direction: column; gap: 16px; }
.tabs-group{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.tabs-group .title{
  font-size: 13px;
  font-weight: 600;
  color: var(--cb-muted);
  flex-shrink: 0;
  padding: 6px 0;
  letter-spacing: .3px;
}
.tabs-group .content{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.tabs-group .content li a{
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--cb-body);
  border-radius: var(--cb-radius-pill);
  text-decoration: none;
}
.tabs-group .content li a:hover{
  background: var(--cb-surface-soft);
  color: var(--cb-ink);
}
.tabs-group .content li.active a{
  background: var(--cb-primary);
  color: #fff;
}

/* ---------- 按钮 (Bootstrap → Coinbase pill) ---------- */
.btn{
  border-radius: var(--cb-radius-pill);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  transition: background-color .15s, color .15s, border-color .15s;
  border: 1px solid transparent;
  line-height: 1.2;
}
.btn-lg{ padding: 14px 28px; font-size: 15px; }
.btn-default{
  background: var(--cb-surface-strong);
  color: var(--cb-ink);
  border-color: transparent;
}
.btn-default:hover{
  background: var(--cb-ink);
  color: #fff;
}
.btn-primary{
  background: var(--cb-primary);
  border-color: var(--cb-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus{
  background: var(--cb-primary-active);
  border-color: var(--cb-primary-active);
  color: #fff;
}
.btn-outline-primary{
  background: transparent;
  border: 1px solid var(--cb-primary);
  color: var(--cb-primary);
}
.btn-outline-primary:hover{
  background: var(--cb-primary);
  color: #fff;
}
.btn-loadmore{
  background: transparent !important;
  border: 1px solid var(--cb-hairline) !important;
  color: var(--cb-ink) !important;
}
.btn-loadmore:hover{
  background: var(--cb-ink) !important;
  border-color: var(--cb-ink) !important;
  color: #fff !important;
}

/* ---------- 分页 ---------- */
.pager,
.pagination{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 24px 0 8px;
  margin: 0;
  list-style: none;
}
.pagination > li{ display: inline-block; }
.pagination > li > a,
.pagination > li > span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--cb-hairline);
  border-radius: var(--cb-radius-pill);
  color: var(--cb-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin: 0;
}
.pagination > li > a:hover{
  background: var(--cb-surface-soft);
  color: var(--cb-primary);
  border-color: var(--cb-hairline);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover{
  background: var(--cb-primary);
  border-color: var(--cb-primary);
  color: #fff;
}
.pagination > .disabled > a,
.pagination > .disabled > span{
  color: var(--cb-muted-soft, #a8acb3);
  background: transparent;
  border-color: var(--cb-hairline-soft);
  cursor: not-allowed;
}

/* ---------- 详情页 (show.html) ---------- */
.article-content{ padding: 0; }
.article-metas{
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--cb-hairline-soft);
}
.metas-title{
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -.6px;
  line-height: 1.2;
  color: var(--cb-ink);
  margin: 0 0 16px;
}
.metas-body{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--cb-muted);
}
.metas-body i{ margin-right: 4px; }
.metas-body span{ display: inline-flex; align-items: center; }

.article-text{
  font-size: 16px;
  line-height: 1.75;
  color: var(--cb-ink);
}
.article-text p{ margin: 0 0 16px; }
.article-text h1,
.article-text h2,
.article-text h3,
.article-text h4{
  font-weight: 600;
  letter-spacing: -.3px;
  color: var(--cb-ink);
  margin: 32px 0 12px;
}
.article-text h1{ font-size: 28px; }
.article-text h2{ font-size: 24px; }
.article-text h3{ font-size: 20px; }
.article-text h4{ font-size: 18px; }
.article-text a{ color: var(--cb-primary); }
.article-text a:hover{ text-decoration: underline; }
.article-text img{
  max-width: 100%;
  height: auto;
  border-radius: var(--cb-radius-lg);
  display: block;
  margin: 16px auto;
}
.article-text blockquote{
  border-left: 3px solid var(--cb-primary);
  padding: 8px 0 8px 16px;
  margin: 16px 0;
  color: var(--cb-body);
  background: var(--cb-surface-soft);
  border-radius: 0 var(--cb-radius-md) var(--cb-radius-md) 0;
}
.article-text pre,
.article-text code{
  background: var(--cb-surface-soft);
  border-radius: var(--cb-radius-md);
  font-family: "JetBrains Mono",ui-monospace,monospace;
  font-size: 13px;
  padding: 2px 6px;
}
.article-text pre{ padding: 16px; overflow-x: auto; }

/* 点赞/打赏区 */
.article-donate{
  text-align: center;
  margin: 32px 0;
}
.article-donate .btn{
  margin: 0 4px;
}

/* 元信息 */
.entry-meta{
  margin: 24px 0;
  padding: 20px 0;
  border-top: 1px solid var(--cb-hairline-soft);
  border-bottom: 1px solid var(--cb-hairline-soft);
  font-size: 13px;
  color: var(--cb-muted);
}
.entry-meta ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.entry-meta ul li{
  padding: 4px 0;
  line-height: 1.6;
}
.entry-meta ul li a{ color: var(--cb-body); }
.entry-meta ul li a:hover{ color: var(--cb-primary); }

.article-prevnext{
  margin-top: 16px !important;
  border-top: 1px solid var(--cb-hairline-soft);
  padding-top: 16px !important;
}
.article-prevnext li{
  font-size: 14px !important;
}
.article-prevnext span{ color: var(--cb-muted); margin-right: 8px; }

/* 操作按钮 */
.article-action-btn{
  padding: 16px 0;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--cb-hairline-soft);
}
.article-action-btn .product-favorite,
.article-action-btn .share-box-a{
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--cb-radius-pill);
  background: var(--cb-surface-strong);
  color: var(--cb-ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  margin-right: 8px;
}
.article-action-btn .product-favorite:hover,
.article-action-btn .share-box-a:hover{
  background: var(--cb-ink);
  color: #fff;
}
.article-action-btn i{ margin-right: 6px; }

/* 相关文章 */
.related-article{
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--cb-hairline-soft);
}
.related-article .embed-responsive{
  border-radius: var(--cb-radius-lg);
  overflow: hidden;
  background: var(--cb-surface-soft);
}
.related-article h5{
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.related-article h5 a{ color: var(--cb-ink); }
.related-article h5 a:hover{ color: var(--cb-primary); }

/* ---------- 侧栏 ---------- */
.media-number{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--cb-hairline-soft);
  margin: 0;
}
.hot-article .panel-body > .media-number:first-of-type,
.recommend-article .panel-body > .media-number:first-of-type{
  border-top: none;
}
.media-number .media-left{
  flex-shrink: 0;
}
.media-number .num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--cb-surface-strong);
  color: var(--cb-muted);
  font-family: "JetBrains Mono",ui-monospace,monospace;
  font-size: 12px;
  font-weight: 600;
}
.media-number:nth-of-type(1) .num,
.media-number:nth-of-type(2) .num,
.media-number:nth-of-type(3) .num{
  background: var(--cb-primary);
  color: #fff;
}
.media-number .media-body{
  flex: 1;
  min-width: 0;
}
.media-number .media-body a{
  color: var(--cb-ink);
  font-size: 14px;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-number .media-body a:hover{ color: var(--cb-primary); }

/* 热门标签云 */
.hot-tags .tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hot-tags .tags .tag{
  background: var(--cb-surface-strong);
  color: var(--cb-body);
}
.hot-tags .tags .tag:hover{
  background: var(--cb-primary);
  color: #fff;
}
.hot-tags .tags .tag span{ font-weight: 500; }

/* 关于作者 */
.about-author .panel-body{ padding: 24px 28px; }
.about-author .media{ display: flex; gap: 16px; align-items: center; }
.about-author .media-left img{
  border-radius: 50%;
}
.about-author .media-heading{
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px !important;
}
.about-author .media-heading a{ color: var(--cb-ink); }
.about-author .media-body{
  font-size: 13px;
  color: var(--cb-body);
  line-height: 1.5;
}

/* ---------- 评论 ---------- */
#comments .panel-title small{ color: var(--cb-muted); font-weight: 400; }

/* ---------- pager (上下页) ---------- */
.pager{ list-style: none; }
.pager li > a,
.pager li > span{
  border-radius: var(--cb-radius-pill);
  border: 1px solid var(--cb-hairline);
  padding: 8px 16px;
  background: transparent;
  color: var(--cb-ink);
}
.pager li > a:hover{ background: var(--cb-surface-soft); }

/* ---------- 频道焦点轮播 (channel.html) ---------- */
.carousel-focus{
  border-radius: var(--cb-radius-xl);
  overflow: hidden;
  background: var(--cb-surface-soft);
  margin-bottom: 16px;
}
.carousel-focus .carousel-img{
  height: 320px;
  background-size: cover;
  background-position: center;
}
.carousel-focus .carousel-caption{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 100%);
  text-shadow: none;
  text-align: left;
  padding: 32px 24px 20px;
}
.carousel-focus .carousel-caption h3{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.2px;
  margin: 0;
  color: #fff;
}
.focus-img .embed-responsive{
  border-radius: var(--cb-radius-lg);
  overflow: hidden;
  background: var(--cb-surface-soft);
  margin-bottom: 12px;
}
.focus-img .intro{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7));
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

/* ---------- 浮动按钮 ---------- */
#floatbtn{ position: fixed; right: 24px; bottom: 24px; z-index: 999; }
#back-to-top{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--cb-canvas);
  border: 1px solid var(--cb-hairline);
  border-radius: 50%;
  box-shadow: var(--cb-shadow-soft);
  color: var(--cb-ink);
  text-decoration: none;
  font-size: 11px;
  line-height: 1;
}
#back-to-top em{ display: none; }
#back-to-top:hover{
  background: var(--cb-ink);
  color: #fff;
  border-color: var(--cb-ink);
}

/* ---------- 加载提示 ---------- */
.loadmore{
  text-align: center;
  padding: 24px 0;
  color: var(--cb-muted);
  font-size: 13px;
}
.loadmore-tips{ display: inline-block; }

/* ---------- 内页响应式 ---------- */
@media (max-width: 768px){
  #content-container{ padding: 16px 16px 32px; }
  .category-title,
  .metas-title{ font-size: 26px; letter-spacing: -.4px; }
  .panel-heading{ padding: 16px 20px; }
  .panel-body{ padding: 16px 20px; }
  .article-list .media{ flex-direction: column; gap: 12px; }
  .article-list .media-left{ flex: 0 0 auto; max-width: 100%; width: 100%; }
  .article-title{ font-size: 17px; }
  .article-text{ font-size: 15px; }
  .article-text h1{ font-size: 24px; }
  .article-text h2{ font-size: 20px; }
}