/* ============================================================
   WearDB · 视觉系统（复刻 hubweb.cn 风格）
   浅灰底、内凹阴影、大圆角、SF Pro 字体、深色模式
   ============================================================ */
:root{
  --bg: #f5f5f5;
  --bg-top: #f2f2f2;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --text: #6a6a6a;
  --text-muted: #808080;
  --text-strong: #19222b;
  --text-faint: #a6a6a6;
  --border: #e3e3e3;
  --border-soft: #e6e6e6;
  --primary: #0d9488;          /* 品牌色，仅用于 logo/强调点缀 */
  --primary-2: #0891b2;
  --inset: rgba(210,210,210,0.5) 1.5px 1.5px 1px -1px inset, rgba(210,210,210,0.5) -1px -1px 1px 0px inset;
  --inset-dark: rgba(100,100,100,0.5) 1.5px 1.5px 1px -1px inset, rgba(100,100,100,0.5) -1px -1px 1px 0px inset;
  /* 多彩小标签（复刻 hubweb 参数标签）*/
  --tag-cpu: #b0e0e6;
  --tag-gpu: #ffb6c1;
  --tag-npu: #dcdcdc;
  --tag-power: #b4e4b4;
  --tag-score: #ffe4b5;
  --tag-io: #b4e4d8;
  --tag-price: #c33939;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #1d1d1d;
    --bg-top: #1d1d1d;
    --surface: #232323;
    --surface-2: #1d1d1d;
    --text: #acacac;
    --text-muted: #acacac;
    --text-strong: #f5f5f5;
    --text-faint: #8a8a8a;
    --border: #424242;
    --border-soft: #424242;
    --inset: var(--inset-dark);
    --tag-cpu: #2a4a52;
    --tag-gpu: #5a3340;
    --tag-npu: #3a3a3a;
    --tag-power: #2f4a33;
    --tag-score: #5a4a2a;
    --tag-io: #2a4a44;
    --tag-price: #d96a6a;
  }
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ font-size: 62.5%; }
body{
  font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--text-strong); text-decoration: none; }
a:hover{ text-decoration: underline; }
ul,li{ list-style:none; }
img{ max-width:100%; }
::selection{ background: var(--primary); color:#fff; }

/* 细滚动条（复刻 hubweb）*/
::-webkit-scrollbar{ width:4px; height:4px; background:transparent; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ border-radius:5px; background:#bbb; }

/* ============================================================
   框架布局：顶栏 + 左侧树 + 主内容区
   ============================================================ */
.app-body{
  display:flex;
  align-items:stretch;
  min-height: calc(100vh - 40px);
}
.main-area{
  flex:1 1 auto;
  min-width:0;
  padding: 20px;
  overflow-x:hidden;
}

/* ---- 顶栏（复刻 hubweb .top_max）---- */
.top_max{
  background-color: var(--bg-top);
  height: 40px;
  width: 100%;
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:center;
  position: sticky;
  top:0;
  z-index: 50;
}
.top_left_logo{ width:30px; height:30px; margin: 0 8px 0 12px; flex-shrink:0; }
.top_left_logo img,.top_left_logo svg{ display:block; height:30px; width:30px; }
.top_title{
  height:40px; line-height:40px; color: var(--text);
  font-size: 14px; font-weight:600; white-space:nowrap;
}
.top_title .logo-highlight{ color: var(--primary); }
.top_right_menu{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  padding-right:14px;
  color: var(--text-faint);
  font-size: 12px;
}
.top_right_menu a{ color: var(--text); display:inline-flex; align-items:center; gap:3px; }
.top_right_menu a:hover{ color: var(--text-strong); }
.top_right_menu svg{ width:13px; height:13px; }

/* ---- 左侧树菜单（复刻 hubweb .hubweb-list / .list）---- */
.hubweb-list{
  flex: 0 0 150px;
  width: 150px;
  background-color: var(--bg);
  border-right: 1px solid var(--border);
  padding: 6px;
  overflow-y: auto;
  height: calc(100vh - 40px);
  position: sticky;
  top: 40px;
}
.list{ width: 100%; }
.list ul li{ border-top: 1px solid var(--border); }
.list ul li:first-child{ border-top: none; }
.list ul li a{
  display:flex; align-items:center;
  padding-left: 8px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 30px;
  position: relative;
  border-radius: 6px;
}
.list ul li a:hover{ color: var(--text-strong); background: rgba(0,0,0,0.03); text-decoration:none; }
.list ul li a.active{ color: var(--text-strong); font-weight:600; }
.list ul li .inactive::after{
  content:'▸'; position:absolute; right:8px; top:0; color: var(--text-faint); font-size:10px;
}
.list ul li .inactive.open::after{ content:'▾'; }
.list ul li ul{ display:none; }
.list ul li ul li{ border-top: 1px solid var(--border-soft); }
.list ul li ul li a{ padding-left: 18px; font-size: 11px; line-height: 30px; }
.list ul li ul li ul{ display:none; }
.list ul li ul li ul li a{ padding-left: 26px; font-size: 11px; background: var(--bg); }
.list ul li ul li ul li a:hover{ background: rgba(0,0,0,0.03); }
.svgdiv{ position:relative; top:0; width:16px; height:16px; flex-shrink:0; margin-right:6px; display:flex; align-items:center; }
.svgdiv svg{ width:16px; height:16px; }
/* 一级菜单分组标题样式 */
.list .menu-group > a{ color: var(--text); font-weight:600; }

/* ============================================================
   主内容区通用：标题栏（复刻 hubweb .title）
   ============================================================ */
.title{
  background-color: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight:600;
  margin: 0 0 20px;
  padding: 14px 22px;
  border-radius: 33px;
  box-shadow: var(--inset);
}
.title span{ display:block; line-height:18px; color: var(--text-muted); font-size:11px; font-weight:400; margin-top:2px; }
.title .title-sub{ font-size:11px; color: var(--text-faint); font-weight:400; }

.crumb{ font-size:11px; color: var(--text-muted); margin-bottom:10px; }
.crumb a{ color: var(--text-muted); }
.crumb a:hover{ color: var(--text-strong); }
.crumb .sep{ margin:0 6px; color: var(--text-faint); }
.crumb strong{ color: var(--text-strong); }

/* ============================================================
   参数对比表（复刻 hubweb 视觉，稳健表格实现）
   横向滚动 + 首列固定 + 分组标题 + 斑马纹
   ============================================================ */
.wdb-cmp-wrap{
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 20px;
}
.wdb-cmp-actions{
  display:flex; align-items:center; gap:10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap:wrap;
}
.wdb-cmp-actions .ttl{ font-weight:600; color: var(--text-strong); font-size:13px; }
.wdb-cmp-actions .tip{ font-size:10px; font-style:oblique; color: var(--text-faint); }
.wdb-cmp-actions .spacer{ margin-left:auto; }
.pill{
  border-radius: 40px;
  box-shadow: var(--inset);
  padding: 4px 16px;
  color: var(--text-strong);
  background-color: var(--surface-2);
  font-size: 12px;
  cursor: pointer;
  border:none;
  display:inline-flex; align-items:center; gap:4px;
}
.pill:hover{ background: rgba(0,0,0,0.04); }

.compare-scroll{ overflow-x:auto; }
table.wdb-cmp{ border-collapse: collapse; width:100%; font-size: 12px; min-width: 640px; }
table.wdb-cmp thead th{
  background: var(--surface-2);
  color: var(--text-strong);
  font-weight:600;
  text-align:center;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: bottom;
  position: sticky; top: 0; z-index: 3;
}
table.wdb-cmp thead th .model-name{ font-size: 13px; }
table.wdb-cmp thead th a{ color: var(--text-strong); }
table.wdb-cmp thead th .model-sub{ display:block; font-size:10px; color: var(--text-faint); font-weight:400; margin-top:2px; }
table.wdb-cmp thead th.spec-label{ text-align:left; min-width:120px; }

table.wdb-cmp td{
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  text-align:center;
  vertical-align: top;
}
table.wdb-cmp tbody tr:nth-child(even) td{ background: var(--bg); }
table.wdb-cmp tbody tr:hover td{ background: rgba(0,0,0,0.025); }
table.wdb-cmp td.spec-label{
  position: sticky; left:0; z-index: 2;
  background: var(--surface-2);
  text-align:left;
  color: var(--text-muted);
  font-weight:600;
  min-width:120px;
  box-shadow: 4px 0 6px -4px rgba(0,0,0,0.12);
}
table.wdb-cmp tbody tr:nth-child(even) td.spec-label{ background: var(--surface-2); }
table.wdb-cmp .group-row td{
  background: var(--surface-2);
  color: var(--text-strong);
  font-weight:700;
  text-align:left;
  letter-spacing: 1px;
  font-size: 11px;
  padding: 7px 12px;
}
/* 多彩参数小标签（复刻 hubweb li-div-*）*/
.tag{ display:inline-block; border-radius:10px; padding:2px 8px; margin:2px; font-size:11px; box-shadow: var(--inset); }
.tag.cpu{ background: var(--tag-cpu); }
.tag.gpu{ background: var(--tag-gpu); }
.tag.npu{ background: var(--tag-npu); }
.tag.power{ background: var(--tag-power); }
.tag.score{ background: var(--tag-score); }
.tag.io{ background: var(--tag-io); }
.tag.price{ color:#fff; background: var(--tag-price); }
.color-dot{ display:inline-block; width:16px; height:16px; border-radius:9px; border:1px solid #b9b9b9; margin:0 2px; vertical-align:middle; }

/* ============================================================
   首页 / 卡片
   ============================================================ */
.hero{
  background: var(--surface-2);
  border-radius: 33px;
  box-shadow: var(--inset);
  padding: 26px 28px;
  margin-bottom: 20px;
}
.hero h1{ font-size: 22px; color: var(--text-strong); font-weight:700; line-height:1.3; }
.hero p{ color: var(--text-muted); margin-top: 10px; font-size: 12px; line-height:1.7; max-width: 760px; }
.hero .hero-actions{ margin-top: 16px; display:flex; gap:10px; flex-wrap:wrap; }
.hero .hero-stats{ display:flex; gap:28px; margin-top:18px; }
.hero .stat-number{ font-size: 22px; font-weight:700; color: var(--text-strong); }
.hero .stat-label{ display:block; font-size:11px; color: var(--text-faint); }

.section-head{ margin: 18px 0 12px; }
.section-head h2{ font-size: 15px; color: var(--text-strong); font-weight:600; }
.section-head p{ font-size:11px; color: var(--text-muted); margin-top:3px; }

.product-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:14px; }
.product-card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 20px;
  padding: 14px;
  box-shadow: var(--inset);
  display:flex; flex-direction:column; gap:8px;
  transition: transform .15s ease;
}
.product-card:hover{ transform: translateY(-2px); }
.product-brand{ font-size:11px; color: var(--text-faint); }
.product-name{ font-size:13px; font-weight:600; color: var(--text-strong); line-height:1.4; }
.product-meta{ font-size:11px; color: var(--text); display:flex; flex-direction:column; gap:3px; }
.product-meta .label{ color: var(--text-faint); margin-right:6px; }
.product-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.product-tags span{ font-size:10px; color: var(--text-muted); background: var(--bg); border-radius:20px; padding:2px 8px; }
.product-actions{ display:flex; gap:8px; margin-top:auto; }
.compare-check{ align-self:flex-start; margin-top:2px; }

/* 按钮 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  border-radius: 40px; padding: 6px 16px; font-size: 12px; cursor:pointer;
  border: none; text-decoration:none; box-shadow: var(--inset);
  background: var(--surface-2); color: var(--text-strong);
  transition: background .15s ease;
}
.btn:hover{ background: rgba(0,0,0,0.04); text-decoration:none; }
.btn.btn-primary{ background: var(--primary); color:#fff; box-shadow:none; }
.btn.btn-primary:hover{ filter: brightness(1.05); }
.btn.btn-outline{ background: var(--surface-2); }
.btn.btn-sm{ padding:4px 12px; font-size:11px; flex:1; }

/* 搜索框 */
.search-box{ margin: 14px 0; }
.search-box input{
  width:100%; padding: 12px 18px; border-radius: 40px; border:none;
  box-shadow: var(--inset); background: var(--surface-2);
  font-size: 12px; color: var(--text-strong); outline:none;
  font-family: inherit;
}
.search-box input::placeholder{ color: var(--text-faint); }

/* ============================================================
   型号详情（product.html）
   ============================================================ */
.detail-head{
  display:flex; gap:20px; align-items:center;
  background: var(--surface-2); border-radius:33px; box-shadow: var(--inset);
  padding: 20px 24px; margin-bottom: 18px; flex-wrap:wrap;
}
.detail-head .watch-placeholder{
  width: 120px; height: 120px; border-radius: 24px; flex-shrink:0;
  background: linear-gradient(135deg, #e8eef0, #d6e6ea);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color: var(--text-strong); font-weight:600; line-height:1.3; padding:10px;
}
@media (prefers-color-scheme: dark){ .detail-head .watch-placeholder{ background: linear-gradient(135deg,#2a2f33,#1f2428); } }
.detail-head h1{ font-size: 18px; color: var(--text-strong); }
.detail-head .sub{ color: var(--text-muted); font-size:12px; margin-top:6px; }
.detail-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.detail-tags span{ font-size:10px; color: var(--text-muted); background: var(--bg); border-radius:20px; padding:2px 8px; }

.spec-group{
  background: var(--surface); border:1px solid var(--border); border-radius:20px;
  padding: 16px 18px; margin-bottom: 14px;
}
.spec-group h3{
  font-size: 13px; color: var(--text-strong); margin-bottom: 10px;
  padding-left: 10px; border-left: 3px solid var(--primary);
}
.spec-row{ display:flex; justify-content:space-between; gap:16px; padding: 6px 0; border-bottom:1px dashed var(--border-soft); font-size:12px; }
.spec-row:last-child{ border-bottom:none; }
.spec-row .k{ color: var(--text-muted); }
.spec-row .v{ color: var(--text-strong); text-align:right; }

/* ============================================================
   通用：空状态 / 提示
   ============================================================ */
.empty-state{ text-align:center; padding: 50px 20px; color: var(--text-faint); }
.empty-state .icon{ font-size: 32px; }
.empty-state p{ margin-top: 10px; font-size: 12px; }

/* 复刻页脚信息条 */
.foot-note{ font-size:10px; color: var(--text-faint); margin-top: 20px; text-align:center; }

/* ============================================================
   详情页（product.html）
   ============================================================ */
.detail-layout{ display:flex; gap:24px; flex-wrap:wrap; }
.detail-visual{ flex:0 0 150px; }
.detail-info{ flex:1 1 320px; min-width:260px; }
.detail-price{ font-size:20px; font-weight:700; color: var(--tag-price); margin:8px 0; }
.detail-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.detail-tags span{ font-size:10px; color: var(--text-muted); background: var(--bg); border-radius:20px; padding:2px 8px; }
.sensor-list{ display:flex; flex-wrap:wrap; gap:6px; }
.sensor-list .sensor{ font-size:11px; background: var(--tag-score); border-radius:10px; padding:3px 10px; box-shadow: var(--inset); }

/* ============================================================
   器件库（components.html）
   ============================================================ */
.component-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.component-card{ background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:12px; box-shadow: var(--inset); }
.component-model{ font-size:13px; font-weight:600; color: var(--text-strong); }
.component-mfr{ font-size:11px; color: var(--text-muted); margin-top:4px; }
.component-used{ font-size:10px; color: var(--text-faint); margin-top:6px; }
.component-section{ margin-bottom:18px; }
.component-section h3{ font-size:13px; color: var(--text-strong); margin-bottom:10px; }

/* ============================================================
   对比页（compare.html）
   ============================================================ */
.compare-layout{ display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
.compare-picker{ flex:0 0 210px; }
.compare-picker h3{ font-size:13px; color: var(--text-strong); margin-bottom:10px; }
.picker-list{ display:flex; flex-direction:column; gap:6px; max-height:62vh; overflow:auto; }
.picker-item{ display:flex; align-items:center; gap:8px; font-size:11px; color: var(--text); background: var(--surface); border:1px solid var(--border); border-radius:10px; padding:6px 10px; cursor:pointer; }
.picker-item.selected{ border-color: var(--primary); }
.picker-item input{ accent-color: var(--primary); }
.btn-full{ width:100%; }
.compare-table-wrap{ flex:1 1 420px; min-width:0; }

/* ============================================================
   关于页（about.html）
   ============================================================ */
.about-wrap{ max-width:780px; }
.about-wrap p{ color: var(--text); line-height:1.8; margin-bottom:12px; font-size:12px; }
.about-stats{ display:flex; gap:14px; flex-wrap:wrap; margin:18px 0; }
.about-stat{ background: var(--surface-2); border-radius:20px; box-shadow: var(--inset); padding:14px 22px; text-align:center; }
.about-stat .num{ font-size:20px; font-weight:700; color: var(--text-strong); }
.about-stat .lbl{ font-size:11px; color: var(--text-faint); }
.roadmap{ background: var(--surface); border:1px solid var(--border); border-radius:20px; padding:16px 18px; margin-top:16px; }
.roadmap-item{ display:flex; gap:12px; padding:6px 0; font-size:12px; align-items:center; }
.roadmap-item .phase{ flex:0 0 64px; color: var(--primary); font-weight:600; }
.roadmap-item .desc{ color: var(--text); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 768px){
  .hubweb-list{ display:none; }
  .app-body{ display:block; }
  .main-area{ padding: 14px; }
  .hero .hero-stats{ gap:18px; }
  .top_title{ font-size:12px; }
}