/* ============================================================
   硬件天梯图 · GUNDAM-MECH 风格重设计 v2
   参考 hk.gundam-official.com：黑白对撞 / 直角细线 / 等宽工程标签 / 巨粗标题
   零青色。琥珀仅作 Top1 点色（呼应官网公告金色）。
   叙事：黑场数据舱 → 黑场控制台 → 白场榜单 → 黑场说明 → 深色页脚
   ============================================================ */
:root{
  --gln-b0:#050607;
  --gln-b1:#0b0d0e;
  --gln-ink:#0d0f10;
  --gln-ink2:#3c4142;
  --gln-mut:#6f7475;
  --gln-soft:#929899;
  --gln-paper:#ffffff;
  --gln-line:#e3e6e6;
  --gln-lined:#cfd3d3;
  --gln-track:#f0f1f1;
  --gln-accent:#000000;
  --gln-gold:#f5c518;
  --gln-max:1720px;
  --gln-padx:clamp(18px,3.6vw,58px);
}
body.gln-body{
  margin:0;
  background-color:#fff;
  background-image:linear-gradient(rgba(20,22,24,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,22,24,.035) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-font-smoothing:antialiased;
}
.gln-mono{font-family:"JetBrains Mono","Consolas",monospace;}
button{font-family:inherit;}

/* ---------- 00 · 黑场主视觉：数据舱 ---------- */
.gln-hero{
  /* hero 顶部留白以变量暴露：右上角装饰标签跟随它定位，避免矮屏被口径框盖住 */
  --gln-hero-pt:calc(40px + clamp(32px,5.8vh,64px));
  position:relative;
  background:var(--gln-b0);
  color:#fff;
  overflow:hidden;
}
.gln-hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 42%,transparent 100%);
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 42%,transparent 100%);
  pointer-events:none;
}
.gln-hero-corner{
  position:absolute;top:max(62px,calc(var(--gln-hero-pt) - 22px));right:clamp(18px,3vw,44px);
  font-size:11px;letter-spacing:.22em;line-height:1;
  color:rgba(255,255,255,.38);
}
.gln-hero-in{
  z-index:2;
  position:relative;
  width:100%;
  max-width:var(--gln-max);
  margin:0 auto;
  padding:var(--gln-hero-pt) var(--gln-padx) clamp(36px,4.9vh,60px);
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,420px);
  gap:clamp(44px,6vw,96px);
  align-items:end;
}
.gln-hero-main{min-width:0;}
.gln-kicker{
  font-size:12px;
  font-weight:500;
  letter-spacing:.34em;
  color:rgba(255,255,255,.5);
  margin:0 0 18px;
  display:flex;align-items:center;gap:14px;
}
.gln-kicker::before{content:"";width:26px;height:1px;background:rgba(255,255,255,.85);}
.gln-title{
  font-family:"Inter",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
font-size:clamp(50px,6.8vw,102px);
  line-height:1.02;
  font-weight:800;
  letter-spacing:-.025em;
  color:#fff;
  margin:0 0 16px;
}
.gln-hero-sub{
  font-family:"Inter",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.9;
  color:rgba(255,255,255,.66);
  max-width:680px;
  margin:0;
}
.gln-hero-spec{
  min-width:0;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.03);
  padding:4px 22px 10px;
  position:relative;
}
.gln-hero-spec::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#fff;
}
.gln-spec-t{
  font-size:10px;letter-spacing:.32em;color:rgba(255,255,255,.42);
  padding:12px 0 4px;margin-bottom:2px;border-bottom:1px solid rgba(255,255,255,.14);
}
.gln-spec-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.12);
}
.gln-spec-row:last-child{border-bottom:none;}
.gln-spec-k{
  font-size:9.5px;letter-spacing:.28em;color:rgba(255,255,255,.4);flex:none;
}
.gln-spec-v{
  font-size:12px;font-weight:500;letter-spacing:.05em;color:rgba(255,255,255,.9);text-align:right;
}
/* 口径栏「基准」的文字长度随分类不同（1~3 行），会让 hero 高度跳动：
   给该格预留固定行数，使 CPU / 显卡 / 主板三页的 hero 等高。
   3.2em = 2 行（本元素 font-size 12px、行高 1.6），不锁 hero 高度、不影响其它格 */
.gln-hero-spec .gln-spec-row:nth-child(3) .gln-spec-v{
  min-height:3.2em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:880px){
  .gln-hero-spec .gln-spec-row:nth-child(3) .gln-spec-v{
    min-height:4.8em;
    -webkit-line-clamp:3;
  }
}


/* ---------- 01 · 黑场控制台 ---------- */
.gln-console-in{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--gln-max);
  margin:0 auto;
  padding:34px var(--gln-padx) 40px;
  box-sizing:border-box;
}
.gln-sec-head{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.gln-sec-num,.gln-note-num{font-size:18px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.3);}
.gln-sec-t{font-size:12px;font-weight:600;letter-spacing:.26em;color:#fff;white-space:nowrap;}
.gln-sec-line{flex:1;height:1px;background:rgba(255,255,255,.16);}
.gln-sec-src{font-size:9.5px;letter-spacing:.16em;color:rgba(255,255,255,.38);white-space:nowrap;}

.gln-ctrl{display:flex;align-items:flex-end;gap:30px 48px;flex-wrap:wrap;}
.gln-ctrl-group{display:flex;flex-direction:column;gap:10px;}
.gln-ctrl-label{font-size:9px;letter-spacing:.32em;color:rgba(255,255,255,.4);}
.gln-tabs{display:inline-flex;}
.gln-tab{
  border:1px solid rgba(255,255,255,.26);
  background:transparent;
  color:rgba(255,255,255,.82);
  padding:10px 28px;
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:13px;font-weight:600;
  letter-spacing:.14em;
  cursor:pointer;
  border-radius:0;
  transition:all .16s ease;
}
.gln-tab + .gln-tab{border-left:none;}
.gln-tab:hover{border-color:#fff;color:#fff;}
.gln-tab.active{background:#fff;border-color:#fff;color:var(--gln-ink);}
.gln-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;}
.gln-chip{
  flex:none;
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  color:rgba(255,255,255,.68);
  /* 与类型标签 .gln-tab 同尺寸（原为 padding:6px 14px / font-size:12px，比标签矮 9px） */
  padding:10px 28px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  border-radius:0;
  transition:all .15s ease;
}
.gln-chip + .gln-chip{border-left:none;}
.gln-chip:hover{border-color:#fff;color:#fff;}
.gln-chip.active{background:#fff;border-color:#fff;color:var(--gln-ink);}
.gln-ctrl-brands{flex:1 1 auto;min-width:0;}
.gln-search{position:relative;min-width:230px;max-width:300px;}
.gln-search-ic{
  position:absolute;left:13px;top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.45);
  pointer-events:none;
}
.gln-search input{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px 10px 40px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:0;
  background:rgba(255,255,255,.04);
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:12px;
  letter-spacing:.04em;
  color:#fff;
  outline:none;
  transition:all .15s ease;
}
.gln-search input::placeholder{color:rgba(255,255,255,.34);}
.gln-search input:focus{border-color:#fff;background:rgba(255,255,255,.07);}
.gln-clear{
  position:absolute;right:8px;top:50%;
  transform:translateY(-50%);
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:0;
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);
  cursor:pointer;
}
.gln-clear:hover{background:rgba(255,255,255,.2);color:#fff;}

/* ---------- 02 · 白场数据区 ---------- */
.gln-data{
  width:100%;
  max-width:var(--gln-max);
  margin:0 auto;
  padding:52px var(--gln-padx) 84px;
  box-sizing:border-box;
}
.gln-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3vw,34px);
  align-items:start;
}
.gln-grid.single{grid-template-columns:minmax(0,1fr);}
.gln-board{
  background:#fff;
  border:1px solid var(--gln-lined);
  border-top:3px solid var(--gln-ink);
}
.gln-board-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 20px 16px;
  border-bottom:1px solid var(--gln-line);
}
.gln-board-head h2::before{
  content:"";width:8px;height:8px;
  background:var(--gln-ink);
  flex:none;margin-top:2px;
}
.gln-board-head h2{
  display:flex;align-items:center;gap:10px;
  font-family:"Inter",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  font-size:19px;font-weight:800;letter-spacing:-.01em;
  color:var(--gln-ink);margin:0;
}
.gln-board-head .gln-meta-sub{
  font-family:"Inter",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  font-size:11.5px;color:var(--gln-mut);margin:5px 0 0;
}
.gln-count{
  flex:none;
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:9.5px;letter-spacing:.16em;
  color:rgba(255,255,255,.7);
  background:var(--gln-ink);
  padding:5px 9px;
  white-space:nowrap;
}

/* 工程列头（暗底栅格） */
.gln-gridhead{
  display:grid;
  grid-template-columns:38px minmax(200px,1.05fr) minmax(130px,1.55fr) 120px;
  gap:18px;
  padding:8px 20px;
  background:var(--gln-ink);
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:9.5px;font-weight:600;
  letter-spacing:.2em;
  color:rgba(255,255,255,.72);
}
.gln-gridhead span:last-child{text-align:right;}
.gln-gridhead span:nth-child(3){text-align:right;}
.gln-gridhead span:nth-child(3)::after{content:"";}

.gln-list{display:flex;flex-direction:column;}
.gln-row{
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(200px,1.05fr) minmax(130px,1.55fr) 120px;
  align-items:center;
  gap:18px;
  padding:14px 20px;
  border-bottom:1px solid #eceeef;
  transition:background .12s ease;
}
.gln-row:last-child{border-bottom:none;}
body .gln-list .gln-row:nth-child(even):not(.rank1){background:rgba(20,22,24,.02);}
.gln-row:not(.rank1):hover{background:#f1f3f3;}
.gln-row.rank1{background:#f6f7f7;}

.gln-rank{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:14px;font-weight:700;
  color:#fff;
  background:var(--gln-ink);
}

.gln-info{min-width:0;}
.gln-name{
  display:flex;align-items:center;gap:7px;
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:13px;font-weight:600;
  color:var(--gln-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gln-row.rank1 .gln-name{color:var(--gln-ink);}
.gln-row.rank1 .gln-name,.gln-row.rank2 .gln-name,.gln-row.rank3 .gln-name{font-weight:600;}
.gln-ref{
  flex:none;
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:9.5px;letter-spacing:.06em;
  color:var(--gln-mut);
  border:1px solid var(--gln-lined);
  background:#fff;
  padding:1px 5px;line-height:1.5;
}
.gln-spec{
  font-family:"Inter",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  font-size:11px;color:var(--gln-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:3px;
}

.gln-bar{
  height:15px;
  background:#eceeef;
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);
}
.gln-bar .fill{
  height:100%;width:0;
  background:linear-gradient(90deg,hsl(var(--hue,48),70%,calc(var(--rl,42%) - 8%)),hsl(var(--hue,48),70%,calc(var(--rl,42%) + 8%)),hsl(var(--hue,48),70%,var(--rl,42%)),hsl(var(--hue,48),70%,calc(var(--rl,42%) + 8%)));
  background-size:300% 100%;
  background-position:0 50%;
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);
  transition:width 1.6s cubic-bezier(.22,.8,.3,1);
  animation:gln-flow 4s alternate infinite;
}
@keyframes gln-flow{
  50%{background-position:100% 50%;}
}

.gln-val{text-align:right;min-width:0;}
.gln-val .v1{
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:14px;font-weight:600;
  color:var(--gln-ink);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.gln-row.rank1 .gln-val .v1{color:var(--gln-ink);}
.gln-val .v2{
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:10px;color:var(--gln-soft);
  margin-top:3px;white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* 榜单行悬停（方案1）：名次方块点亮 + 左侧竖线 + 流光加速 */
.gln-row:not(.rank1):hover{background:#f5f7f7;}
.gln-row:hover::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:hsl(var(--hue,48),70%,calc(var(--rl,42%) - 4%));
}
.gln-row:hover .gln-rank{
  background:hsl(var(--hue,48),70%,calc(var(--rl,42%) - 6%));
  transition:background .16s ease;
}
.gln-row:hover .gln-bar .fill{
  filter:brightness(1.12);
  animation:gln-flow-hover 1.2s linear infinite;
}
.gln-row:hover .gln-val .v1{color:hsl(var(--hue,48),70%,calc(var(--rl,42%) - 8%));}
@keyframes gln-flow-hover{
  from{background-position:0% 50%;}
  to{background-position:200% 50%;}
}

.gln-empty{
  padding:64px 20px;text-align:center;
  font-family:"JetBrains Mono","Consolas",monospace;
  font-size:12px;letter-spacing:.1em;color:var(--gln-soft);
}

/* ---------- 03 · 黑场说明横幅 ---------- */
.gln-note{
  background:var(--gln-b0);
  color:#fff;
  padding:54px var(--gln-padx) 62px;
}
.gln-note-head{width:100%;max-width:var(--gln-max);margin:0 auto 26px;display:flex;align-items:center;gap:14px;}
.gln-note-body{
  max-width:var(--gln-max);margin:0 auto;
  font-family:"Inter",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  font-size:13px;line-height:2.05;
  color:rgba(255,255,255,.58);
}

/* ---------- 本页页脚去青 + 局部焦点 ---------- */
.gln-body .site-footer .footer-brand::before{background:#fff;}
.gln-body .footer-icp a:hover,.gln-body .footer-col a:hover{color:#fff;}
.gln-body a:focus-visible,.gln-body button:focus-visible,.gln-body input:focus-visible{
  outline:2px solid #fff;outline-offset:2px;}
.gln-data a:focus-visible,.gln-data button:focus-visible{outline-color:var(--gln-ink);}

/* ---------- 04 · 说明正文（默认可见；供用户与搜索引擎阅读，非隐藏内容） ---------- */
.gln-seo{
  background:var(--gln-b0);
  color:#fff;
  padding:0 var(--gln-padx) 76px;
}
.gln-seo-in{width:100%;max-width:var(--gln-max);margin:0 auto;}
.gln-seo h2{
  display:flex;align-items:center;gap:10px;
  font-family:"Inter",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  font-size:17px;font-weight:800;letter-spacing:-.01em;
  color:#fff;margin:44px 0 14px;
}
.gln-seo h2::before{content:"";width:8px;height:8px;background:#fff;flex:none;}
.gln-seo h2:first-child{margin-top:0;}
.gln-seo p{
  font-family:"Inter",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  font-size:14px;line-height:2.1;
  color:rgba(255,255,255,.62);margin:0 0 14px;
}
.gln-seo-links{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;}
.gln-seo-links a{
  display:inline-flex;align-items:center;
  padding:10px 18px;border:1px solid rgba(255,255,255,.22);
  font-size:13px;font-weight:600;color:rgba(255,255,255,.82);
  text-decoration:none;transition:border-color .2s,color .2s,background .2s;
}
.gln-seo-links a:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.06);}
.gln-seo-links a:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.gln-faq{margin:0;}
.gln-faq dt{
  font-family:"Inter",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  font-size:13.5px;font-weight:700;color:#fff;
  padding:16px 0 6px;border-top:1px solid rgba(255,255,255,.12);
}
.gln-faq dt:first-of-type{border-top:0;padding-top:0;}
.gln-faq dd{
  margin:0;font-family:"Inter",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  font-size:13.5px;line-height:2;color:rgba(255,255,255,.58);
}
@media (max-width:880px){
  .gln-seo{padding-bottom:56px;}
  .gln-seo h2{font-size:16px;margin-top:36px;}
  .gln-seo p,.gln-faq dt,.gln-faq dd{font-size:13px;}
}

/* ---------- 响应式 ---------- */
@media (max-width:1120px){
  .gln-row,.gln-gridhead{grid-template-columns:38px minmax(180px,1.1fr) 1.4fr 104px;gap:12px;padding-left:16px;padding-right:16px;}
}
@media (max-width:900px){
  .gln-grid{grid-template-columns:minmax(0,1fr);}
  .gln-sec-src{display:none;}
}
@media (max-width:680px){
  .gln-hero-in{padding:70px 16px 32px;}
  .gln-title{font-size:40px;}
  .gln-hero-sub{line-height:1.75;}
  .gln-spec-row{padding:6px 0;}
  .gln-hero-corner{display:none;}
  .gln-hero-in{grid-template-columns:1fr;gap:24px;align-items:start;}
  .gln-console-in{padding:16px 14px 20px;}
  .gln-ctrl{flex-direction:column;align-items:stretch;gap:20px;}
  .gln-tabs{width:100%;}
  .gln-tab{flex:1;padding:10px 0;text-align:center;}
  .gln-search{max-width:none;}
  .gln-data{padding:36px 14px 60px;}
  .gln-gridhead{display:none;}
  .gln-row{
    grid-template-columns:32px minmax(0,1fr) auto;
    grid-template-areas:"rank info val" "rank bar  bar";
    gap:4px 12px;
    padding:14px;
  }
  .gln-rank{grid-area:rank;}
  .gln-info{grid-area:info;}
  .gln-val{grid-area:val;}
  .gln-bar{grid-area:bar;margin-top:8px;}
  .gln-board-head{padding:15px 16px 13px;}
  .gln-note{padding:44px 16px 52px;}
}

/* ---- v3 宽幅版：断点收束 ---- */
@media (max-width:1180px){
  .gln-hero-in{grid-template-columns:minmax(0,1fr) 320px;gap:36px;}
}
@media (max-width:880px){
  .gln-hero-in{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;}
  .gln-hero-spec{width:100%;}
  .gln-search{max-width:100%;}
}

/* Hero 复刻原版：几何发光三角形遮罩网格 */
@property --glow-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #ADF5FF;
}
.gln-hero{
  background:#070710;
  animation:gln-bg-animation 20s alternate infinite;
}
@keyframes gln-bg-animation{
  from{background-position:0% 0%;}
  to{background-position:400% 400%;}
}
.gln-hero .triangle-container{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  display:grid;
  grid-template-columns:repeat(var(--columns), calc(var(--triangle-base) * 2 + var(--gap)));
  width:100%;height:100%;
}
.gln-hero .triangle-set{
  display:inline-block;position:relative;
  width:calc(var(--triangle-base) * 2 + var(--gap));
  height:var(--triangle-base-height);
}
.gln-hero .triangle-set--offset{
  transform:translateX(calc(-1 * var(--triangle-base) - 0.5 * var(--gap)));
}
.gln-hero .triangle-set::before,
.gln-hero .triangle-set::after{
  content:"";position:absolute;width:0;height:0;top:var(--gap);
  border-right:var(--triangle-width) solid transparent;
  border-left:var(--triangle-width) solid transparent;
}
.gln-hero .triangle-set::before{
  left:calc(-1 * var(--triangle-base));
  border-bottom:var(--triangle-height) solid #070710;
}
.gln-hero .triangle-set::after{
  right:calc(var(--gap) * 2.5);
  border-top:var(--triangle-height) solid #070710;
}
.gln-hero #glow{
  position:absolute;width:min(52vw,560px);height:min(52vw,560px);
  background:radial-gradient(circle closest-side,var(--glow-color),transparent);
  animation:gln-glow-animation 5.2s ease infinite alternate;
  transform:translate(-50%,-50%);
}
@keyframes gln-glow-animation{
  from{--glow-color:#ADF5FF;transform:translate(-50%,-50%) scale(0.5);}
  to{--glow-color:#FF6978;transform:translate(-50%,-50%) scale(1) rotate(90deg);}
}
.gln-hero{--gap:0.125rem;--triangle-base:3rem;--triangle-base-height:calc(1.733 * var(--triangle-base));--triangle-width:calc(var(--triangle-base) - var(--gap));--triangle-height:calc(var(--triangle-base-height) - var(--gap));}
