@charset "utf-8";
/*==============================================================
  terminal.css — 行情终端组件覆盖层（xianbao_theme_pro）
  叠加于 style.css / haodan.css 之后加载，基于令牌（tokens.css）重塑。
  红线：不改名/不删除既有类与 data-* 契约（list.js 无限滚动、
  屏蔽筛选、排行榜、猜你喜欢依赖），仅做视觉覆盖与增量元素
  （.xb-price / .xb-cate）的样式。
==============================================================*/

/*==================== 1. 全局基础 ====================*/
html{background:var(--xb-bg);color:var(--xb-ink)}
html.night{background:var(--xb-bg)!important;color:var(--xb-ink)!important}
body{font-family:var(--xb-font);color:var(--xb-ink)}
a{color:var(--xb-ink-2)}
a:hover{color:var(--c-primary)}
h1,h2,h3,h4,h5,h6{color:var(--xb-ink);font-weight:600}
::selection{background:var(--c-primary);color:#fff}
/* 等宽数字：行情数字列对齐的关键 */
time,.badge,.xb-price,.page-numbers,.com-num,.rank-num{font-variant-numeric:tabular-nums}

/* 键盘可达性：恢复全局 outline:0 吃掉的焦点环 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--c-primary);outline-offset:2px;border-radius:2px;
}

/* 卡面统一：白卡+染色阴影+细边 */
.sb{background:var(--xb-card);box-shadow:var(--shadow)}
#mainbox,#sidebar .bangdan,#sidebar .guanzhu,.xiangguan,.flink,.daohang{
  border:1px solid var(--xb-line);border-radius:2px;
}

/*==================== 2. 头部与导航 ====================*/
.header{background:var(--xb-card);border-bottom:1px solid var(--xb-line);box-shadow:none}
.pc-nav li a{color:var(--xb-ink-2);transition:color .15s ease}
.pc-nav li a:hover{color:var(--c-primary)}
.pc-nav .active a,.pc-nav .active a:hover{color:var(--c-primary);font-weight:600}
.nav-sb{background:var(--xb-card);border:1px solid var(--xb-line)}
.header .login .iconfont,.dark-mode .iconfont,.search-button .iconfont{color:var(--xb-ink-2)}
.header .login a:hover .iconfont,.dark-mode:hover .iconfont,.search-button:hover .iconfont{color:var(--c-primary)}

/* 二级频道条（移动端/窄屏） */
.nav2-wrap{background:var(--xb-card);border-bottom:1px solid var(--xb-line)}
.nav2-ul a,.nav2-ul li a{color:var(--xb-ink-2)}
.nav2-ul .active a{color:var(--c-primary)}

/* 搜索面板 */
#search-area{border:1px solid var(--xb-line);box-shadow:var(--shadow-up)}
#search-area .s-input{border:1px solid var(--xb-line);background:var(--xb-card);color:var(--xb-ink)}
#search-area .s-input:focus{border-color:var(--c-primary)}
#search-area .s-button{background:var(--c-primary);color:#fff;border-radius:2px}

/*==================== 3. 状态栏（活动24小时实时更新中…） ====================*/
#mainbox>.mianbaoxie{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:10px;
  background:var(--xb-card);border-bottom:1px solid var(--xb-line);
  font-size:13px;padding:8px 16px;border-radius:2px 2px 0 0;
}
#mainbox>.mianbaoxie .tishi{color:var(--xb-ink);font-weight:600}
#mainbox>.mianbaoxie .shuatime{color:var(--xb-ink-3);font-size:12px;margin-left:auto}
/* 频道页筛选开关（meta.php 注入 .xb-qf-toggle 到 .shuatime 旁） */
#mainbox>.mianbaoxie .xb-qf-toggle{margin-left:auto;margin-right:8px}
.xb-qf-toggle{border:1px solid var(--c-primary);color:var(--c-primary);background:transparent;border-radius:2px;font-size:12px;line-height:22px;height:24px;padding:0 12px}
.xb-qf-toggle:hover,.xb-qf-toggle.active{background:var(--c-primary);color:#fff}
.night .xb-qf-toggle{border-color:var(--c-primary);color:var(--c-primary);background:transparent}
.night .xb-qf-toggle:hover,.night .xb-qf-toggle.active{background:var(--c-primary);color:#14181f}

/*==================== 4. 快捷筛选框（提权常驻+吸顶） ====================*/
.xb-quick-filter{
  display:block;position:sticky;top:37px;z-index:55;
  margin:0;padding:10px 16px;background:var(--xb-card);
  border:0;border-bottom:1px solid var(--xb-line);border-radius:0;
  box-shadow:0 4px 8px rgba(28,35,46,.04);
}
.xb-quick-filter--active{border-color:transparent;background:var(--xb-card);box-shadow:inset 3px 0 0 var(--c-primary),0 4px 8px rgba(28,35,46,.04)}
.xb-qf-field{color:var(--xb-ink-2);font-size:12px}
.xb-qf-input{border:1px solid var(--xb-line);background:var(--xb-card);color:var(--xb-ink);border-radius:2px;height:28px;padding:0 8px;font-size:13px;transition:border-color .15s ease}
.xb-qf-input:focus{border-color:var(--c-primary)}
.xb-qf-input::placeholder{color:var(--xb-ink-3)}
.xb-qf-sep{color:var(--xb-ink-3)}
.xb-qf-btn{background:var(--c-primary);color:#fff;border:0;border-radius:2px;height:28px;padding:0 16px;font-size:13px;cursor:pointer}
.xb-qf-btn:hover{background:var(--c-primary-dark)}
.xb-qf-clear{color:var(--xb-ink-3);font-size:12px}
.xb-qf-clear:hover{color:var(--c-primary)}
/* 桌面端筛选常驻 → 隐藏冗余开关；移动端保留开关（见响应式段） */
@media screen and (min-width:1101px){#mainbox>.mianbaoxie .xb-qf-toggle{display:none}}

/*==================== 5. 频道分类药丸条（tip-daohang） ====================*/
.tip-daohang .daohang{background:var(--xb-card);border:1px solid var(--xb-line);border-radius:0 0 2px 2px;box-shadow:var(--shadow)}
.tip-nav span,.sort-row span{
  display:inline-block;padding:3px 14px;margin:0 4px 0 0;border-radius:999px;
  font-size:13px;color:var(--xb-ink-2);cursor:pointer;line-height:22px;
  transition:background .15s ease,color .15s ease;
}
.tip-nav span:hover,.sort-row span:hover{background:var(--xb-hover);color:var(--xb-ink)}
.tip-nav .active,.sort-row .active{background:var(--c-primary);color:#fff;font-weight:500}

/*==================== 6. 线报行（核心：.article-list） ====================*/
.article-list{
  position:relative;display:block;
  padding:var(--xb-row-pad);
  border-bottom:1px solid var(--xb-line);
  transition:background .12s ease;
}
.article-list:hover{background:var(--xb-hover)}
.article-list::before{ /* 来源色条 */
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;
  border-radius:0 2px 2px 0;background:var(--c-line);
  transition:background .15s ease;
}
.article-list:hover::before{background:var(--c-primary)}
/* 来源色映射：按分类图标类着色（:has 渐进增强，旧浏览器退化为灰条） */
.article-list:has(.cg1)::before{background:#4c6ef5}
.article-list:has(.cg2)::before,.article-list:has(.cg26)::before,.article-list:has(.cg29)::before{background:#f76707}
.article-list:has(.cg4)::before{background:#1971c2}
.article-list:has(.cg5)::before{background:#0ca678}
.article-list:has(.cg6)::before{background:#e64980}
.article-list:has(.cg7)::before{background:#1098ad}
.article-list:has(.cg8)::before{background:#f08c00}
.article-list:has(.cg9)::before{background:#7048e8}
.article-list:has(.cg10)::before,.article-list:has(.cg10-tb)::before,.article-list:has(.cg10-jd)::before,.article-list:has(.cg10-pdd)::before,.article-list:has(.cg10-tuan)::before,.article-list:has(.cg10-other)::before{background:#e8590c}
.article-list:has(.cg11)::before{background:#9c36b5}
.article-list:has(.cg12)::before{background:#1c7ed6}
.article-list:has(.cg13)::before{background:#0b7285}
.article-list:has(.cg14)::before{background:#d6336c}
.article-list:has(.cg16)::before{background:#f59f00}
.article-list:has(.cg17)::before{background:#fab005}
.article-list:has(.cg18)::before{background:#12b886}
.article-list:has(.cg19)::before{background:#0ca678}
.article-list:has(.cg20)::before{background:#5c7cfa}
.article-list:has(.cg21)::before{background:#7950f2}
.article-list:has(.cg22)::before{background:#20c997}
.article-list:has(.cg23)::before,.article-list:has(.cg24)::before{background:#1098ad}
.article-list:has(.cg25)::before{background:#82c91e}
.article-list:has(.cg27)::before{background:#e03131}
.article-list:has(.cg28)::before{background:#3b5bdb}
.article-list:has(.cg30)::before{background:#3b5bdb}
.article-list:has(.cg31)::before{background:#c2255c}
.article-list:has(.cgwx)::before{background:#12b886}
.article-list:has(.cgsmzdm)::before{background:#0ca678}

/* 来源图标 */
.article-list .figure{float:left;width:20px;height:20px;margin:2px 10px 0 0;border-radius:4px;background-size:20px 20px}

/* 标题行 */
.article-list .title{font-size:15px;font-weight:500;line-height:1.55;margin-left:0;overflow:hidden}
.article-list .title a{color:var(--xb-ink);transition:color .12s ease}
.article-list .title a:hover{color:var(--c-primary)}
.article-list .title a:visited{color:var(--xb-visited)}
.article-list a.visited{color:var(--xb-visited)!important}
.article-list .title a em,.article-list em{font-style:normal;font-weight:600;color:var(--xb-hot)}

/* 类目标签（模板增量元素） */
.xb-cate{float:left;margin:3px 10px 0 0;font-size:12px;line-height:16px;color:var(--xb-ink-3);max-width:8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 价格（省钱绿，等宽） */
.xb-price{
  float:right;margin:2px 12px 0 12px;
  color:var(--xb-green);font-weight:600;font-size:15px;line-height:20px;
  white-space:nowrap;
}
.xb-price::before{content:"¥";font-size:11px;font-weight:500;margin-right:1px;opacity:.8}

/* 时间徽章：弱化为灰字 */
.article-list .title .badge{float:right;background:transparent;color:var(--xb-ink-3);font-size:13px;line-height:20px;padding:2px 0;margin:0 0 0 10px;font-weight:400}
.article-list .title .badge.red{color:var(--xb-hot);font-weight:500}
/* 评论徽章：去底色弱化 */
.article-list .title .badge.com{color:var(--xb-ink-3);font-size:12px}
.article-list .title .badge.com .iconfont{font-size:12px;margin-right:3px;opacity:.8}
/* 值得买价格徽章（icon-RMB 变体）= 价格展示 */
.article-list .title .badge.com:has(.icon-RMB){color:var(--xb-green);font-size:14px;font-weight:600}

/* 置顶徽章 */
.article-list .istop{
  float:right;color:var(--xb-hot);background:transparent;border:1px solid var(--xb-hot);
  border-radius:2px;font-size:12px;line-height:1.4em;padding:0 5px;margin:3px 0 0 8px;
}
/* 新线报高亮（newer/newest 由前端筛选/刷新逻辑标注） */
.listbox .newer{background:var(--xb-green-soft)}
.listbox .newest{background:var(--xb-green-soft)}
.listbox .newer::before,.listbox .newest::before{background:var(--xb-green)!important}

/*==================== 7. 侧栏：排行榜/我的关注/猜你喜欢 ====================*/
.celan .mianbaoxie,.xiangguan .mianbaoxie{background:transparent;border-bottom:1px solid var(--xb-line);font-size:13px;font-weight:600;color:var(--xb-ink);padding:9px 14px}
.tabs span,.rank-tabs span,.r-tabs span,.zuankebatabs span{font-size:13px;color:var(--xb-ink-2);cursor:pointer;font-weight:500}
.tabs .active,.r-tabs .active,.rank-tabs .active,.zuankebatabs .active{color:var(--c-primary)}
/* 侧栏行紧凑化 */
#sidebar .article-list,.xiangguan .article-list{padding:7px 14px 7px 16px;font-size:14px}
#sidebar .article-list .title,.xiangguan .article-list .title{font-size:14px;font-weight:400}
#sidebar .xb-cate,.xiangguan .xb-cate{display:none}
#sidebar .figure,.xiangguan .figure{width:16px;height:16px;background-size:16px 16px;margin-top:3px}
#sidebar .article-list::before,.xiangguan .article-list::before{width:2px;top:8px;bottom:8px}
/* 排行榜空态 */
.empty-tip{color:var(--xb-ink-3)!important}

/*==================== 8. 分页与加载 ====================*/
.pagebar .nav-links a,.pagebar .nav-links label{border:1px solid var(--xb-line);border-radius:2px}
.page-numbers{background:var(--c-primary);color:#fff;border-radius:2px}
a.page-numbers{background:transparent;color:var(--xb-ink-2)}
a.page-numbers:hover{background:var(--c-primary);color:#fff}
.pagebar .nav-links label{background:var(--xb-card)}
.pagebar .nav-links label input{border:1px solid var(--xb-line)}
.pagination.end{color:var(--xb-ink-3);background:transparent;border:0}

/*==================== 9. 友情链接/页脚/工具栏 ====================*/
.flink .c-title{font-size:15px;border-bottom:1px solid var(--xb-line)}
.flink .rule{color:var(--xb-ink-3)}
.footer{background:#171c26;border-top:1px solid var(--xb-line)}
.footer .title{font-weight:600;color:#c6cdd8}
.toolbar .btn{background:var(--xb-card);border:1px solid var(--xb-line)}
.toolbar .btn:hover{background:var(--c-primary);border-color:var(--c-primary)}

/*==================== 10. 暗色补丁（覆盖 style.css 旧夜色值） ====================*/
html.night .sb{background:var(--xb-card)}
html.night body{background:var(--xb-bg);color:var(--xb-ink)}
html.night .header,html.night .footer{background:#171c26}
html.night .footer{border-top:1px solid var(--xb-line)}
html.night .mianbaoxie{background:var(--xb-card);border-color:var(--xb-line)}
html.night #mainbox>.mianbaoxie{background:var(--xb-card)}
html.night .nav-sb{background:var(--xb-card);border-color:var(--xb-line)}
html.night .nav2-wrap,html.night .nav2-panel{background:var(--xb-card)}
html.night .nav2-panel li a{color:var(--xb-ink-2)}
html.night .tip-daohang .daohang{background:var(--xb-card);border-color:var(--xb-line)}
html.night .tip-nav span:hover,html.night .sort-row span:hover{background:var(--xb-hover)}
html.night .tip-nav .active,html.night .sort-row .active{background:var(--c-primary);color:#14181f}
html.night .article-list{border-bottom-color:var(--xb-line)}
/* style.css .night .badge 有 !important 药丸底，同级反制为行情终端灰字样式 */
.night .article-list .title .badge{background:transparent!important;color:var(--xb-ink-2)!important;padding:2px 0}
.night .article-list .title .badge.red{color:var(--xb-hot)!important}
.night .article-list .title .badge.com{color:var(--xb-ink-2)!important}
.night .article-list .title .badge.com:has(.icon-RMB){color:var(--xb-green)!important}
.night .article-list .istop{background:transparent!important;color:var(--xb-hot)!important;border-color:var(--xb-hot)}
html.night .article-list .title a{color:var(--xb-ink)}
html.night .article-list .title a:visited{color:var(--xb-visited)}
html.night .article-list a.visited{color:var(--xb-visited)!important}
html.night .article-list:hover{background:var(--xb-hover)}
html.night .article-list .title .badge{background:transparent;color:var(--xb-ink-3)}
html.night .article-list .title .badge.red{color:var(--xb-hot)}
html.night .listbox .newer,html.night .listbox .newest{background:var(--xb-green-soft)}
html.night #search-area{background:var(--xb-card);border-color:var(--xb-line)}
html.night #search-area .s-input{background:#14181f;border-color:var(--xb-line);color:var(--xb-ink)}
html.night .xb-quick-filter{background:var(--xb-card)}
html.night .xb-quick-filter--active{background:var(--xb-card);box-shadow:inset 3px 0 0 var(--c-primary),0 4px 8px rgba(0,0,0,.25)}
html.night .xb-qf-input{background:#14181f;border-color:var(--xb-line);color:var(--xb-ink)}
html.night .xb-qf-btn{background:var(--c-primary);color:#14181f}
html.night .page-numbers{background:var(--c-primary);color:#14181f}
html.night a.page-numbers{background:transparent;color:var(--xb-ink-2)}
html.night a.page-numbers:hover{background:var(--c-primary);color:#14181f}
html.night .toolbar .btn{background:var(--xb-card);border-color:var(--xb-line)}
html.night .footer .title{color:#c6cdd8}
html.night .flink .c-title{border-color:var(--xb-line)}
/* 旧夜色残留清除 */
.night .xb-qf-toggle{border-color:var(--c-primary)!important;background:transparent!important;color:var(--c-primary)!important}
.night .xb-qf-toggle.active{background:var(--c-primary)!important;color:#14181f!important}

/*==================== 11. 响应式 ====================*/
@media screen and (max-width:1100px){
  .article-list .title{font-size:14px;white-space:normal;line-height:1.55;display:flex;align-items:baseline;gap:8px}
  .article-list .title a{order:-1;flex:1 1 auto;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;text-overflow:ellipsis}
  /* flex 化后 float 失效：评论/时间/价格按 order 排到标题右侧，价格保证可见 */
  .article-list .title .badge,.article-list .title .badge.com,.article-list .istop,.xb-price{float:none;flex:none}
  .article-list .title .badge.com{order:1}
  .article-list .title .badge{order:2}
  .article-list .istop{order:3;margin:0}
  .xb-price{order:4;margin:0;font-size:14px}
  .xb-cate{display:none}
  #mainbox>.mianbaoxie{top:0}
  .xb-quick-filter{position:static;display:none}
  .xb-quick-filter--open{display:block}
  .xb-qf-toggle{display:inline-block}
}
@media screen and (max-width:768px){
  .xb-price{font-size:13px}
  .article-list .title .badge{font-size:12px}
  #sidebar .article-list .title a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-line-clamp:unset}
}

/*==================== 12. 动效克制 ====================*/
@media (prefers-reduced-motion:reduce){
  .article-list,.article-list .title a,.tip-nav span{transition:none}
}