/* ============================================================
   网址频道页样式
   由 channel.php 内联 <style> 抽离而来（样式与程序分离）。
   动态主题色经由页面根元素的 inline style 注入 CSS 变量。
   ============================================================ */
  /* ===== 频道页（紧扣首页主题：主色可配 / 1200 居中 / 白卡片 / 悬浮上移） ===== */
  .chan-wrap { min-height: 100vh; display: flex; flex-direction: column; }
  .cw { width: 1200px; max-width: calc(100% - 24px); margin: 0 auto; }

  /* 头部：logo + 搜索 + 返回（与分类页一致） */
  .cat-header { background: #fff; border-bottom: 1px solid #e6e6e6; }
  .cat-header .cw { display: flex; align-items: center; gap: 24px; padding: 16px 0; }
  .cat-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; }
  .cat-logo .lg-mark { width: 34px; height: 34px; border-radius: 7px; background: var(--chan-accent); display: flex; align-items: center; justify-content: center; }
  .cat-logo .lg-mark svg { width: 34px; height: 34px; }
  .cat-logo .lg-txt { display: flex; flex-direction: column; line-height: 1.25; }
  .cat-logo .lg-txt .t { font-size: 17px; font-weight: 700; color: #333; letter-spacing: .5px; }
  .cat-logo .lg-txt .u { font-size: 11px; color: #aaa; }
  .cat-logo img.lg-img { max-height: 46px; display: block; }
  .cat-search { flex: 1; max-width: 560px; }
  .cat-search form { display: flex; height: 40px; border: 2px solid var(--chan-accent); border-radius: 8px; overflow: hidden; }
  .cat-search input { flex: 1; border: none; outline: none; padding: 0 14px; font-size: 14px; color: #333; min-width: 0; }
  .cat-search input::placeholder { color: #aaa; }
  .cat-search button { border: none; background: var(--chan-accent); color: #fff; padding: 0 22px; font-size: 14px; letter-spacing: 2px; cursor: pointer; transition: filter .15s; }
  .cat-search button:hover { filter: brightness(.92); }
  .cat-home-btn { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #555; text-decoration: none; padding: 7px 14px; border: 1px solid #e2e5ea; border-radius: 6px; transition: all .15s; }
  .cat-home-btn:hover { color: var(--chan-accent); border-color: var(--chan-accent); background: #f4f8ff; }

  /* 主体 */
  .chan-main { flex: 1; padding: 20px 0 40px; }

  /* 频道统计条（简洁白底，仿爱站排行榜风格） */
  .chan-hero {
    background: #fff; border: 1px solid #eef0f3; border-radius: 14px;
    padding: 24px 16px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
  }
  .chan-hero .stat-bar { display: flex; align-items: stretch; }
  .chan-hero .stat-cell { flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 12px; position: relative; }
  .chan-hero .stat-cell + .stat-cell::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 48px; background: #eceef1; }
  .chan-hero .sc-icon { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--chan-accent); color: var(--chan-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .chan-hero .sc-icon svg { width: 30px; height: 30px; }
  .chan-hero .sc-icon .sc-new { font-size: 15px; font-weight: 800; letter-spacing: .5px; }
  .chan-hero .sc-meta { display: flex; flex-direction: column; min-width: 0; }
  .chan-hero .sc-label { font-size: 14px; color: #8a919c; margin-bottom: 5px; }
  .chan-hero .sc-num { font-size: 28px; font-weight: 700; color: #2b3038; line-height: 1.05; letter-spacing: .5px; }

  /* 分类索引：每行「一级分类 + 其二级分类」 */
  .chan-catindex { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); padding: 4px 20px; margin-bottom: 16px; }
  .cci-row { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid #f2f3f5; }
  .cci-row:last-child { border-bottom: none; }
  .cci-top { flex: 0 0 auto; min-width: 96px; max-width: 160px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #333; text-decoration: none; padding-top: 3px; line-height: 1.4; }
  .cci-top .nv-ic { color: var(--chan-accent); display: inline-flex; }
  .cci-top:hover { color: var(--chan-accent); }
  .cci-subs { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .cci-sub { font-size: 13px; color: #666; text-decoration: none; padding: 3px 12px; border-radius: 14px; background: #f5f6f8; border: 1px solid #eceef1; transition: all .15s; white-space: nowrap; }
  .cci-sub:hover { color: var(--chan-accent); border-color: #cddbf5; background: #f4f8ff; }
  .cci-sub.cci-all { background: transparent; border-color: transparent; color: #9aa0a8; padding-left: 2px; }
  .cci-sub.cci-all:hover { color: var(--chan-accent); background: transparent; }

  /* 分类区块卡片 */
  .chan-sec { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); padding: 18px 20px 20px; margin-bottom: 16px; scroll-margin-top: 14px; }
  /* 合并主内容区：把「猜你喜欢 + 各分类区块」合并为同一张卡片 */
  .chan-merged { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); padding: 0 20px; margin-bottom: 16px; }
  .chan-merged .chan-sec { background: transparent; border-radius: 0; box-shadow: none; padding: 20px 0; margin-bottom: 0; }
  .chan-merged .chan-sec + .chan-sec { border-top: 1px solid #eef0f3; }
  /* 两栏布局：左内容 + 右侧栏 */
  .chan-layout { display: flex; align-items: flex-start; gap: 16px; }
  .chan-col-main { flex: 1; min-width: 0; }
  .chan-col-side { width: 300px; flex-shrink: 0; }

  /* 板块标题（红条 + 标题 + 内联子分类 + 更多） */
  .chan-sec-hd { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #f2f3f5; margin-bottom: 14px; }
  .chan-sec-bar { width: 4px; height: 18px; min-width: 4px; border-radius: 2px; background: var(--chan-accent); }
  .chan-sec-tt { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; flex-shrink: 0; }
  .chan-sec-tt .nm { font-size: 17px; font-weight: 700; color: #222; letter-spacing: .3px; white-space: nowrap; }
  .chan-sec-tt .ct { font-size: 12px; color: #9aa0a8; }
  .chan-sec-tt .ct b { color: #f25d30; margin: 0 2px; }
  .chan-sec-subs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; flex-wrap: nowrap; }
  .chan-sec-subs a { font-size: 13px; color: #7a828c; text-decoration: none; padding: 3px 9px; border-radius: 6px; white-space: nowrap; transition: all .15s; }
  .chan-sec-subs a:hover { color: var(--chan-accent); background: #f0f6ff; }
  .chan-sec-more { margin-left: auto; flex-shrink: 0; font-size: 13px; color: #9aa0a8; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 6px; transition: color .15s; }
  .chan-sec-more:hover { color: var(--chan-accent); }
  .chan-sec-more svg { width: 14px; height: 14px; }

  /* 猜你喜欢 */
  .chan-guess-refresh { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #7a828c; background: none; border: none; cursor: pointer; padding: 4px 9px; border-radius: 6px; transition: color .15s, background .15s; font-family: inherit; }
  .chan-guess-refresh:hover { color: var(--chan-accent); background: #f0f6ff; }
  .chan-guess-refresh svg { width: 15px; height: 15px; transition: transform .45s ease; }
  .chan-guess-refresh.spin svg { transform: rotate(360deg); }
  .chan-guess-body .guess-page[hidden] { display: none !important; }

  /* 今日热门 · 排名序号 */
  .chan-hot-rank { flex-shrink: 0; width: 18px; text-align: center; font-size: 14px; font-weight: 800; font-style: italic; color: #c5cad2; }
  .chan-hot-rank.r1 { color: #e0472a; }
  .chan-hot-rank.r2 { color: #f0810a; }
  .chan-hot-rank.r3 { color: #d8a300; }
  .chan-hot .chan-card { gap: 9px; }

  /* 右侧栏卡片 */
  .side-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); padding: 16px 16px 10px; margin-bottom: 16px; }
  .side-ad { padding: 0; overflow: hidden; line-height: 0; }
  .side-ad img { display: block; width: 100%; height: auto; }
  .side-ad .ad-slot, .side-ad .ad-item { line-height: normal; }

  /* 会员操作组件：推荐网站 / 我的投稿 / 我的点赞 */
  .side-actions { padding: 16px; }
  .sa-main { display: flex; align-items: center; justify-content: center; gap: 7px; height: 46px; background: var(--chan-accent); color: #fff; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; transition: filter .15s, transform .15s; }
  .sa-main:hover { filter: brightness(1.07); transform: translateY(-1px); }
  .sa-main svg { width: 18px; height: 18px; }
  .sa-links { display: flex; margin-top: 6px; }
  .sa-links a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 15px 0 9px; color: #6a7180; text-decoration: none; font-size: 13px; transition: color .15s; }
  .sa-links a + a { border-left: 1px solid #f0f2f5; }
  .sa-links a:hover { color: var(--chan-accent); }
  .sa-links a svg { width: 23px; height: 23px; }
  .side-hd { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #222; padding-bottom: 12px; }
  .side-hd .bar { width: 4px; height: 15px; border-radius: 2px; background: var(--chan-accent); }
  .side-hd .more { margin-left: auto; font-size: 12px; font-weight: 400; color: #9aa0a8; text-decoration: none; }
  .side-hd .more:hover { color: var(--chan-accent); }
  .side-rank { list-style: none; margin: 0; padding: 0; }
  .side-rank li { margin-bottom: 3px; }
  .side-rank a { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; text-decoration: none; transition: background .15s; }
  .side-rank a:hover { background: #f6f8fb; }
  .side-rank .rk { width: 18px; text-align: center; font-size: 13px; font-weight: 800; color: #c2c6cc; font-style: italic; flex-shrink: 0; }
  .side-rank .rk.top { color: var(--chan-accent); }
  .side-rank .srk-ico { width: 28px; height: 28px; min-width: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; overflow: hidden; position: relative; }
  .side-rank .srk-ico.r { border-radius: 50%; }
  .side-rank .srk-ico .site-favicon { width: 100%; height: 100%; object-fit: cover; }
  .side-rank .srk-nm { flex: 1; min-width: 0; font-size: 13.5px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-rank a:hover .srk-nm { color: var(--chan-accent); }
  .side-rank .srk-hot { font-size: 11px; color: #b6bcc4; flex-shrink: 0; }
  .side-rank .srk-date { font-size: 11px; color: #b6bcc4; flex-shrink: 0; }
  .side-recent li a { padding-left: 6px; }

  /* 网格布局（卡片） */
  .chan-grid { display: grid; grid-template-columns: repeat(var(--chan-cols, 4), 1fr); gap: 12px; }
  .chan-card { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid #eef0f3; border-radius: 10px; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
  .chan-card:hover { border-color: #cddbf5; box-shadow: 0 6px 16px rgba(27,91,213,.12); transform: translateY(-2px); }
  .chan-ico { width: 38px; height: 38px; min-width: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; overflow: hidden; position: relative; }
  .chan-ico.r { border-radius: 50%; }
  .chan-ico .site-favicon { width: 100%; height: 100%; object-fit: cover; }
  .chan-cbody { min-width: 0; flex: 1; overflow: hidden; }
  .chan-cname { display: block; font-size: 14px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
  .chan-card:hover .chan-cname { color: var(--chan-accent); }
  .chan-cdesc { display: block; font-size: 12px; color: #9aa0a8; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* 列表布局（紧凑文字链） */
  .chan-list { display: grid; grid-template-columns: repeat(var(--chan-cols, 4), 1fr); gap: 2px 6px; }
  .chan-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; font-size: 14px; color: #333; text-decoration: none; white-space: nowrap; overflow: hidden; transition: background .12s, color .12s; }
  .chan-link:hover { background: #f4f8ff; color: var(--chan-accent); }
  .chan-lico { width: 22px; height: 22px; min-width: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; overflow: hidden; position: relative; }
  .chan-lico.r { border-radius: 50%; }
  .chan-lico .site-favicon { width: 100%; height: 100%; object-fit: cover; }
  .chan-lname { overflow: hidden; text-overflow: ellipsis; }

  /* 空态 */
  .chan-empty { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); text-align: center; padding: 70px 20px; color: #b0b4bb; }
  .chan-empty .ce-ico { font-size: 44px; margin-bottom: 12px; }
  .chan-empty h2 { margin: 0 0 6px; font-size: 19px; color: #444; }
  .chan-empty p { margin: 0; font-size: 14px; }

  @media (max-width: 1024px) { .chan-grid, .chan-list { --chan-cols: 3 !important; } .chan-layout { display: block; } .chan-col-side { display: none; } }
  @media (max-width: 768px) {
    .chan-grid, .chan-list { --chan-cols: 2 !important; }
    .chan-sec-subs { display: none; }
    .cat-header .cw { flex-wrap: wrap; gap: 12px; }
    .cat-search { order: 3; max-width: 100%; flex-basis: 100%; }
    .cat-home-btn { margin-left: 0; }
    .chan-hero { padding: 16px 6px; }
    .chan-hero .stat-cell { flex-direction: column; gap: 9px; text-align: center; padding: 12px 4px; }
    .chan-hero .sc-icon { width: 46px; height: 46px; }
    .chan-hero .sc-icon svg { width: 23px; height: 23px; }
    .chan-hero .sc-icon .sc-new { font-size: 12px; }
    .chan-hero .sc-num { font-size: 21px; }
    .chan-hero .sc-label { font-size: 12px; }
  }
  @media (max-width: 480px) {
    .chan-grid, .chan-list { --chan-cols: 1 !important; }
    .cci-row { flex-direction: column; gap: 8px; }
    .cci-top { min-width: 0; max-width: none; }
  }