/* 测无忧 · 全站共享组件样式（面包屑 / 站内搜索 / 分类引导条 / 读完下一步 / 首页决策导航）
   设计令牌 var(--color-*) 由各页 <style> 中的 :root 提供。此文件用于统一维护公共组件外观。 */

/* ===== 面包屑导航 ===== */
.breadcrumb{background:var(--color-bg-alt);border-bottom:1px solid var(--color-border);font-size:0.85rem;}
.breadcrumb .container{padding:10px 16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--color-text-muted);max-width:var(--max-width);margin:0 auto;}
.breadcrumb a{color:var(--color-text-secondary);text-decoration:none;}
.breadcrumb a:hover{color:var(--color-primary);}
.breadcrumb .sep{color:var(--color-text-muted);opacity:.6;}
.breadcrumb .cur{color:var(--color-text);font-weight:600;}
body.dark-mode .breadcrumb{background:#1a1a2e;border-color:#333355;}

/* ===== header 全局搜索框 ===== */
.header-search{display:flex;align-items:center;gap:8px;background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:20px;padding:6px 14px;margin:0 16px;flex:1;max-width:300px;}
.header-search i{color:var(--color-text-muted);font-size:.9rem;}
.header-search input{border:none;background:transparent;outline:none;font-size:.9rem;color:var(--color-text);width:100%;}
body.dark-mode .header-search{background:#1a1a2e;border-color:#333355;}
body.dark-mode .header-search input{color:#e0e0f0;}
@media(max-width:768px){.header-search{max-width:150px;margin:0 8px;}}
@media(max-width:480px){.header-search{max-width:120px;padding:5px 10px;}}

/* ===== 分类页决策引导条 ===== */
.cat-guide{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--color-primary-light);border:1px solid var(--color-primary);border-radius:var(--radius-lg);padding:14px 18px;margin:16px 0;}
.cat-guide .cg-title{font-weight:700;color:var(--color-primary);}
.cat-guide a{font-size:.9rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:16px;padding:6px 14px;color:var(--color-text-secondary);text-decoration:none;transition:var(--transition);}
.cat-guide a:hover{border-color:var(--color-primary);color:var(--color-primary);}
body.dark-mode .cat-guide{background:#1a2a4a;border-color:#2a4a6a;}
body.dark-mode .cat-guide a{background:#111122;border-color:#333355;color:#b0b0d0;}

/* ===== 文章页「读完下一步」CTA ===== */
.next-step{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--color-bg-alt);border:1px solid var(--color-border);border-left:4px solid var(--color-primary);border-radius:var(--radius);padding:16px 20px;margin:28px 0;}
.next-step .ns-title{font-weight:700;color:var(--color-text);}
.next-step a{font-size:.9rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:16px;padding:7px 14px;color:var(--color-text-secondary);text-decoration:none;transition:var(--transition);}
.next-step a:hover{border-color:var(--color-primary);color:var(--color-primary);}
body.dark-mode .next-step{background:#1a1a2e;border-color:#333355;}
body.dark-mode .next-step a{background:#111122;border-color:#333355;color:#b0b0d0;}

/* ===== 首页三入口决策导航 ===== */
.decision-nav{margin:8px 0 20px;}
.decision-nav .dn-title{font-size:1.1rem;font-weight:700;color:var(--color-text);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.decision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.decision-col{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:18px;transition:var(--transition);}
.decision-col:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}
.decision-col h3{font-size:1rem;margin:0 0 12px;color:var(--color-primary);display:flex;align-items:center;gap:8px;}
.decision-col .dn-links{display:flex;flex-wrap:wrap;gap:8px;}
.decision-col .dn-links a{font-size:.85rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:16px;padding:6px 12px;color:var(--color-text-secondary);text-decoration:none;transition:var(--transition);}
.decision-col .dn-links a:hover{border-color:var(--color-primary);color:var(--color-primary);}
body.dark-mode .decision-col{background:#1a1a2e;border-color:#333355;}
body.dark-mode .decision-col .dn-links a{background:#111122;border-color:#333355;color:#b0b0d0;}
@media(max-width:768px){.decision-grid{grid-template-columns:1fr;}}

/* ===== 榜单体系导航（值得买 / 红榜 / 黑榜互通 + 分品类跳转） ===== */
.rank-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px;}
.rank-tabs a{font-size:.9rem;font-weight:600;background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:40px;padding:8px 18px;color:var(--color-text-secondary);text-decoration:none;transition:var(--transition);}
.rank-tabs a:hover{border-color:var(--color-primary);color:var(--color-primary);}
.rank-tabs a.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.rank-cats{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 20px;align-items:center;}
.rank-cats .rc-label{font-size:.82rem;color:var(--color-text-muted);font-weight:600;}
.rank-cats a{font-size:.82rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:16px;padding:5px 12px;color:var(--color-text-secondary);text-decoration:none;transition:var(--transition);}
.rank-cats a:hover{border-color:var(--color-primary);color:var(--color-primary);}
body.dark-mode .rank-tabs a{background:#1a1a2e;border-color:#333355;color:#b0b0d0;}
body.dark-mode .rank-tabs a.active{background:var(--color-primary);color:#fff;}
body.dark-mode .rank-cats a{background:#111122;border-color:#333355;color:#b0b0d0;}

/* ===== 数据可溯源弹层 ===== */
.trace-badge{cursor:pointer;}
.trace-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:2000;padding:20px;}
.trace-mask.open{display:flex;}
.trace-modal{background:var(--color-bg);border-radius:var(--radius-lg);max-width:560px;width:100%;max-height:86vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);border:1px solid var(--color-border);}
.trace-modal .tm-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--color-border);}
.trace-modal .tm-head h3{font-size:1.15rem;display:flex;align-items:center;gap:8px;}
.trace-modal .tm-head .tm-close{cursor:pointer;background:none;border:none;font-size:1.4rem;color:var(--color-text-muted);line-height:1;}
.trace-modal .tm-body{padding:20px 24px;}
.trace-modal .tm-body p.lead{color:var(--color-text-secondary);font-size:.92rem;margin-bottom:16px;}
.trace-step{display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed var(--color-border);}
.trace-step:last-child{border-bottom:none;}
.trace-step .ts-icon{color:var(--color-primary);font-size:1.1rem;margin-top:2px;}
.trace-step h4{font-size:.98rem;margin-bottom:2px;}
.trace-step p{font-size:.86rem;color:var(--color-text-secondary);}
.trace-modal .tm-foot{padding:16px 24px;border-top:1px solid var(--color-border);text-align:center;}
body.dark-mode .trace-modal{background:#222244;border-color:#333355;}
body.dark-mode .trace-modal .tm-head,body.dark-mode .trace-modal .tm-foot{border-color:#333355;}
body.dark-mode .trace-step{border-color:#333355;}
body.dark-mode .trace-step p,body.dark-mode .trace-modal .tm-body p.lead{color:#b0b0d0;}