/*
Theme Name: 分享网
Theme URI: https://fenxiang.cc
Author: 分享网
Author URI: https://fenxiang.cc
Description: 轻量资源分享站主题。深色宽版、低透明底 + 白字，含资源字段体系、获取方式三态渲染、模块化首页。
Version: 1.6.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fenxiang
Tags: dark, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1 · 变量与基础
   ========================================================================== */
:root{
  --fx-bg:        #0b0e14;
  --fx-bg-2:      #11151f;
  --fx-bg-3:      #171d2a;
  --fx-fill:      rgba(255,255,255,.04);
  --fx-fill-2:    rgba(255,255,255,.07);
  --fx-line:      rgba(255,255,255,.075);
  --fx-line-2:    rgba(255,255,255,.14);
  /* 卡面用实色叠层，比半透明白干净（半透明在深底上会发灰） */
  --fx-card:      #131822;
  --fx-card-2:    #182030;
  --fx-card-3:    #1e2635;
  --fx-well:      #0f141d;
  --fx-t1:        #e9edf5;
  --fx-t2:        #9aa5ba;
  --fx-t3:        #6b768c;
  --fx-brand:     #4cc2ff;
  --fx-brand-2:   #8b7bff;
  --fx-ok:        #34d399;
  --fx-warn:      #fbbf24;
  --fx-bad:       #f87171;
  --fx-grad:      linear-gradient(120deg,#4cc2ff 0%,#8b7bff 100%);
  --fx-grad-soft: linear-gradient(120deg,rgba(76,194,255,.16),rgba(139,123,255,.16));
  /* 圆角收敛：子比用的是 8px 体系，这里 12/9/6 三档 */
  --fx-r:         12px;
  --fx-r-s:        9px;
  --fx-r-xs:       6px;
  --fx-wrap:      1400px;
  --fx-gap:       20px;
  --fx-ease:      cubic-bezier(.25,.8,.35,1);
  --fx-shadow:    0 16px 40px rgba(0,0,0,.36);
  --fx-shadow-sm: 0 6px 18px rgba(0,0,0,.24);
  --fx-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                  "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
                  "Noto Sans CJK SC", sans-serif;
  --fx-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--fx-bg);
  color:var(--fx-t1);
  font-family:var(--fx-font);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 页面底噪：极淡的双色光晕，避免纯黑发死 */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(60vw 42vh at 12% -6%, rgba(76,194,255,.075), transparent 62%),
    radial-gradient(52vw 40vh at 92% 2%, rgba(139,123,255,.065), transparent 60%);
}

a{ color:var(--fx-brand); text-decoration:none; transition:color .18s ease; }
a:hover{ color:#7fd4ff; }

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.35; font-weight:650; letter-spacing:.01em; }

p{ margin:0 0 1em; }

hr{ border:0; border-top:1px solid var(--fx-line); margin:2em 0; }

::selection{ background:rgba(76,194,255,.28); color:#fff; }

:focus-visible{ outline:2px solid var(--fx-brand); outline-offset:2px; border-radius:4px; }

.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ==========================================================================
   2 · 布局
   ========================================================================== */
.fx-wrap{
  width:100%; max-width:var(--fx-wrap);
  margin:0 auto; padding:0 28px;
  position:relative; z-index:1;
}

.fx-sec{ margin-top:56px; }

.fx-sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:22px;
}
.fx-sec-head-l{ display:flex; align-items:center; gap:12px; min-width:0; }

.fx-sec-title{
  font-size:23px; font-weight:660; margin:0;
  display:flex; align-items:center; gap:12px;
  letter-spacing:.004em; line-height:1.3;
}
.fx-sec-title::before{
  content:""; width:3px; height:20px; border-radius:99px;
  background:var(--fx-grad); flex:none;
}
.fx-sec-sub{
  font-size:14px; color:var(--fx-t3);
  padding-bottom:4px; flex:none;
}

.fx-sec-more{
  font-size:14px; color:var(--fx-t2);
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 13px; border-radius:var(--fx-r-xs);
  background:var(--fx-card); border:1px solid var(--fx-line);
  transition:.2s var(--fx-ease); flex:none;
}
.fx-sec-more:hover{
  color:var(--fx-t1); background:var(--fx-card-2);
  border-color:var(--fx-line-2); transform:translateX(2px);
}

/* ==========================================================================
   3 · 头部
   ========================================================================== */
.fx-header{
  position:sticky; top:0; z-index:60;
  background:rgba(11,14,20,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--fx-line);
  /* 吸附状态切换时底色/描边/投影都平滑过渡，不要「啪」一下换掉 */
  transition:background .22s var(--fx-ease), border-color .22s var(--fx-ease),
             box-shadow .22s var(--fx-ease);
}

.fx-header-in{
  display:flex; align-items:center; gap:26px;
  height:64px;
}

.fx-brand{
  display:inline-flex; align-items:center; gap:10px;
  flex:none; color:var(--fx-t1);
}
.fx-brand:hover{ color:var(--fx-t1); }

.fx-brand-mark{
  width:58px; height:29px; flex:none; display:block;
  filter:drop-shadow(0 5px 16px rgba(76,194,255,.30)) drop-shadow(0 2px 10px rgba(110,77,255,.22));
  transition:transform .25s ease;
}
.fx-brand:hover .fx-brand-mark{ transform:rotate(-6deg) scale(1.06); }

.fx-brand-text{
  font-size:18.5px; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(120deg,#fff 15%,#b9d8ff 60%,#c9bdff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.fx-nav{ flex:1; min-width:0; }
.fx-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
}
.fx-nav a{
  display:inline-block; padding:7px 13px; border-radius:9px;
  color:var(--fx-t2); font-size:15.5px; font-weight:500;
  transition:.18s ease;
}
.fx-nav a:hover,
.fx-nav .current-menu-item > a{
  color:var(--fx-t1);
  background:var(--fx-fill-2);
}

.fx-head-act{ display:flex; align-items:center; gap:10px; flex:none; }

.fx-head-search{
  display:flex; align-items:center; gap:8px;
  height:36px; padding:0 12px;
  background:var(--fx-fill); border:1px solid var(--fx-line);
  border-radius:999px; transition:.2s ease;
}
.fx-head-search:focus-within{ border-color:rgba(76,194,255,.45); background:var(--fx-fill-2); }
.fx-head-search input{
  width:130px; background:none; border:0; outline:0;
  color:var(--fx-t1); font-size:15px; font-family:inherit;
}
.fx-head-search input::placeholder{ color:var(--fx-t3); }
.fx-head-search button{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--fx-t2); display:grid; place-items:center;
}
.fx-head-search button:hover{ color:var(--fx-brand); }

/* 移动端菜单按钮。默认隐藏，≤860px 才出现。
   三条线点开后收成叉；展开状态下按钮亮一圈品牌色并持续呼吸，
   用来提示「这里可以按回去」。 */
.fx-nav-toggle{
  display:none;
  position:relative;
  background:var(--fx-fill); border:1px solid var(--fx-line);
  color:var(--fx-t1); border-radius:11px;
  width:42px; height:42px; padding:0; cursor:pointer;
  place-items:center;
  transition:background .24s var(--fx-ease), border-color .24s var(--fx-ease),
             color .24s var(--fx-ease), box-shadow .24s var(--fx-ease);
}
.fx-nav-toggle:hover{ background:var(--fx-fill-2); border-color:var(--fx-line-2); }
.fx-nav-toggle[aria-expanded="true"]{
  color:var(--fx-brand);
  background:rgba(76,194,255,.12);
  border-color:rgba(76,194,255,.4);
  animation:fx-toggle-glow 2.4s ease-out infinite;
}
@keyframes fx-toggle-glow{
  0%  { box-shadow:0 0 0 0 rgba(76,194,255,.36); }
  70% { box-shadow:0 0 0 11px rgba(76,194,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(76,194,255,0); }
}

/* 汉堡三横 → 叉 */
.fx-bars{ position:relative; display:block; width:18px; height:12px; }
.fx-bars i{
  position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .3s var(--fx-ease), opacity .2s var(--fx-ease),
             top .3s var(--fx-ease);
}
.fx-bars i:nth-child(1){ top:0; }
.fx-bars i:nth-child(2){ top:5px; }
.fx-bars i:nth-child(3){ top:10px; }
.fx-nav-toggle[aria-expanded="true"] .fx-bars i:nth-child(1){ top:5px; transform:rotate(45deg); }
.fx-nav-toggle[aria-expanded="true"] .fx-bars i:nth-child(2){ opacity:0; transform:scaleX(.4); }
.fx-nav-toggle[aria-expanded="true"] .fx-bars i:nth-child(3){ top:5px; transform:rotate(-45deg); }

/* ==========================================================================
   4 · 首页 · 搜索主视觉
   ========================================================================== */
.fx-hero{
  margin-top:34px;
  padding:58px 40px 52px;
  border-radius:22px;
  background:
    linear-gradient(160deg, rgba(76,194,255,.10), rgba(139,123,255,.07) 46%, rgba(255,255,255,.02)),
    var(--fx-bg-2);
  border:1px solid var(--fx-line);
  position:relative; overflow:hidden;
  text-align:center;
}
.fx-hero::after{
  content:""; position:absolute; inset:-40% -10% auto auto; width:560px; height:560px;
  background:radial-gradient(circle, rgba(139,123,255,.18), transparent 66%);
  pointer-events:none;
}

.fx-hero-h1{
  font-size:clamp(26px,3.4vw,40px); font-weight:750; margin:0 0 12px;
  letter-spacing:.01em;
}
.fx-hero-h1 em{
  font-style:normal;
  background:var(--fx-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.fx-hero-sub{
  color:var(--fx-t2); font-size:16.5px; max-width:620px;
  margin:0 auto 26px; line-height:1.8;
}

.fx-hero-form{
  display:flex; gap:10px; max-width:600px; margin:0 auto;
  background:rgba(11,14,20,.6);
  border:1px solid var(--fx-line-2);
  border-radius:999px; padding:7px 7px 7px 20px;
  transition:.22s ease;
}
.fx-hero-form:focus-within{
  border-color:rgba(76,194,255,.5);
  box-shadow:0 0 0 4px rgba(76,194,255,.09), 0 10px 30px rgba(0,0,0,.3);
}
.fx-hero-input{
  flex:1; min-width:0; background:none; border:0; outline:0;
  color:var(--fx-t1); font-size:16.5px; font-family:inherit;
}
.fx-hero-input::placeholder{ color:var(--fx-t3); }
.fx-hero-btn{
  flex:none; border:0; cursor:pointer;
  background:var(--fx-grad); color:#08111c;
  font-size:16px; font-weight:650; font-family:inherit;
  padding:0 26px; height:42px; border-radius:999px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fx-hero-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(76,194,255,.34); }

.fx-hero-hot{
  margin-top:18px; display:flex; flex-wrap:wrap; gap:9px;
  justify-content:center;
}
.fx-hero-hot a{
  font-size:14px; color:var(--fx-t2);
  padding:5px 13px; border-radius:999px;
  background:var(--fx-fill); border:1px solid var(--fx-line);
  transition:.2s ease;
}
.fx-hero-hot a:hover{
  color:var(--fx-t1); border-color:rgba(76,194,255,.4);
  background:rgba(76,194,255,.09);
}

.fx-hero-stats{
  margin-top:30px; padding-top:26px;
  border-top:1px solid var(--fx-line);
  display:flex; justify-content:center; flex-wrap:wrap; gap:14px 52px;
}
.fx-stat{ text-align:center; }
.fx-stat-n{
  display:block; font-size:25px; font-weight:730; line-height:1.2;
  background:var(--fx-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.fx-stat-l{ font-size:14px; color:var(--fx-t3); }

/* ==========================================================================
   5 · 首页 · 分类入口
   ========================================================================== */
.fx-cats{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(246px,1fr));
}

.fx-cat{
  --fx-cc:#4cc2ff;              /* 每个分类自己的主色，由模板输出 */
  display:flex; flex-direction:column;
  padding:16px 16px 14px;
  border-radius:var(--fx-r);
  background:var(--fx-card);
  border:1px solid var(--fx-line);
  color:var(--fx-t1);
  position:relative; overflow:hidden;
  transition:transform .26s var(--fx-ease), background .26s var(--fx-ease),
             border-color .26s var(--fx-ease), box-shadow .26s var(--fx-ease);
}
/* 顶部一道分类色，比原来的左侧竖条更含蓄 */
.fx-cat::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--fx-cc), transparent 78%);
  opacity:.45; transition:opacity .26s var(--fx-ease);
}
/* hover 时从右上角渗出该分类的色晕 */
.fx-cat::after{
  content:""; position:absolute; right:-34px; top:-34px;
  width:132px; height:132px; border-radius:50%;
  background:var(--fx-cc); filter:blur(50px); opacity:0;
  pointer-events:none; transition:opacity .32s var(--fx-ease);
}
.fx-cat:hover{
  transform:translateY(-3px);
  background:var(--fx-card-2);
  border-color:color-mix(in srgb, var(--fx-cc) 32%, transparent);
  color:var(--fx-t1);
  box-shadow:var(--fx-shadow-sm);
}
.fx-cat:hover::before{ opacity:1; }
.fx-cat:hover::after{ opacity:.16; }

.fx-cat-top{
  display:flex; align-items:center; gap:11px;
  position:relative; z-index:1;
}
.fx-cat-ico{
  width:40px; height:40px; border-radius:11px; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--fx-cc) 24%, transparent),
    color-mix(in srgb, var(--fx-cc) 5%, transparent));
  border:1px solid color-mix(in srgb, var(--fx-cc) 26%, transparent);
  color:var(--fx-cc);
  transition:transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease);
}
.fx-cat-ico svg{ width:20px; height:20px; display:block; }
.fx-cat:hover .fx-cat-ico{
  transform:translateY(-1px) scale(1.05);
  box-shadow:0 8px 20px -7px color-mix(in srgb, var(--fx-cc) 62%, transparent);
}

.fx-cat-n{
  flex:none; display:inline-flex; align-items:baseline; gap:2px;
  font-size:12.5px; color:var(--fx-t3);
  padding:3px 9px; border-radius:99px;
  background:var(--fx-fill); border:1px solid var(--fx-line);
  font-variant-numeric:tabular-nums;
}
.fx-cat-n b{ font-size:14px; font-weight:650; color:var(--fx-t2); }

.fx-cat-name{
  position:relative; z-index:1;
  flex:1; min-width:0;
  font-size:17.5px; font-weight:640; line-height:1.4;
  letter-spacing:.008em; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fx-cat-desc{
  position:relative; z-index:1;
  font-size:13.4px; color:var(--fx-t3); line-height:1.78;
  margin:11px 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; flex:1;
}
/* 「更多」：做成一枚小药丸。刻意压小字号与内边距 —— 它是卡片里的次级
   入口，不该跟分类名抢视线。hover 时只亮一圈分类色描边 + 箭头右移。 */
.fx-cat-go{
  position:relative; z-index:1;
  align-self:flex-end; margin-top:13px;
  font-size:12.2px; font-weight:540; letter-spacing:.02em;
  line-height:1; color:var(--fx-t3);
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px;
  border-radius:99px;
  background:transparent;
  border:1px solid var(--fx-line);
  transition:color .26s var(--fx-ease), background .26s var(--fx-ease),
             border-color .26s var(--fx-ease), padding-right .26s var(--fx-ease);
}
.fx-cat-go i{
  font-style:normal; font-size:11px; line-height:1; opacity:.6;
  transition:transform .26s var(--fx-ease), opacity .26s var(--fx-ease);
}
.fx-cat:hover .fx-cat-go{
  color:var(--fx-cc);
  background:color-mix(in srgb, var(--fx-cc) 13%, transparent);
  border-color:color-mix(in srgb, var(--fx-cc) 40%, transparent);
  padding-right:11px;
}
.fx-cat:hover .fx-cat-go i{ transform:translateX(2px); opacity:1; }

/* ==========================================================================
   6 · 卡片网格
   ========================================================================== */
/* 卡片最小宽 250px。主栏（双栏布局里约 1006px）落成 3 列、每张 322px ——
   正好是「一行三个」的观感；更宽的自适应到 4 列，窄屏依次降到 2 / 1 列，
   不需要写媒体查询。250 这个值是为了让 1200px 视口也不掉成两张大卡
   （主栏 806px 时 3 列需要 790px，再大一点就变 2 列 390px 了）。
   用 auto-fill 而不是 auto-fit：卡片数不满一整行时保留空轨道，
   最后一张不会被拉伸成半屏宽。 */
.fx-grid{
  display:grid; gap:var(--fx-gap);
  grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
}

.fx-card{
  position:relative;
  display:flex; flex-direction:column;
  border-radius:var(--fx-r);
  background:var(--fx-card);
  border:1px solid var(--fx-line);
  overflow:hidden;
  transition:transform .28s var(--fx-ease), border-color .28s var(--fx-ease),
             background .28s var(--fx-ease), box-shadow .28s var(--fx-ease);
}
.fx-card:hover{
  transform:translateY(-3px);
  background:var(--fx-card-2);
  border-color:rgba(76,194,255,.3);
  box-shadow:var(--fx-shadow-sm);
}
/* hover 时顶边亮起一道渐变线 */
.fx-card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:2;
  background:var(--fx-grad);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--fx-ease);
}
.fx-card:hover::after{ transform:scaleX(1); }

.fx-card-thumb{
  display:block; position:relative;
  /* 16:9 —— 比 3:2 更扁，封面不再喧宾夺主 */
  aspect-ratio:16/9; overflow:hidden;
  background:var(--fx-bg-3);
}
/* 图底压一层暗角，纯色/文字封面不会太平 */
.fx-card-thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(11,14,20,.4), transparent 46%);
}
.fx-card-thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--fx-ease);
}
.fx-card:hover .fx-card-thumb img{ transform:scale(1.035); }

.fx-thumb-ph{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:linear-gradient(140deg, rgba(76,194,255,.12), rgba(139,123,255,.1));
  font-size:34px; font-weight:700;
  color:rgba(255,255,255,.46);
  letter-spacing:.04em;
}

.fx-card-body{
  position:relative; z-index:1;
  padding:15px 17px 16px;
  display:flex; flex-direction:column; flex:1;
}

/* 卡底一行：左边标签、右边时间与浏览数。
   两者同处一行，卡片比原来矮一整行；标签放不下时由遮罩淡出裁掉，
   而右侧元信息在遮罩之外，永远不会被吃掉。 */
.fx-card-foot{
  display:flex; align-items:center; gap:10px;
  padding-top:11px; border-top:1px solid var(--fx-line);
}
.fx-card-tags{
  display:flex; gap:6px; align-items:center; flex-wrap:nowrap;
  overflow:hidden; min-width:0; flex:1;
  -webkit-mask-image:linear-gradient(90deg,#000 76%,transparent);
          mask-image:linear-gradient(90deg,#000 76%,transparent);
}
.fx-tag-cat{
  flex:none; font-size:12.5px; line-height:1.5; padding:3px 9px;
  border-radius:var(--fx-r-xs);
  background:rgba(76,194,255,.12); color:#8fd6ff;
  border:1px solid rgba(76,194,255,.18);
}
.fx-tag-plat{
  flex:none; font-size:12.5px; line-height:1.5; padding:3px 9px;
  border-radius:var(--fx-r-xs);
  background:transparent; color:var(--fx-t3);
  border:1px solid var(--fx-line);
  transition:color .22s var(--fx-ease), border-color .22s var(--fx-ease);
}
.fx-card:hover .fx-tag-plat{ color:var(--fx-t2); border-color:var(--fx-line-2); }

.fx-card-title{
  font-size:17.5px; font-weight:620; line-height:1.5; margin:0 0 8px;
  letter-spacing:.006em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.fx-card-title a{ color:var(--fx-t1); }
.fx-card:hover .fx-card-title a{ color:var(--fx-brand); }

.fx-card-exc{
  font-size:14px; color:var(--fx-t2); line-height:1.75; margin:0 0 13px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; flex:1;
}

/* 时间与浏览数：文字换成小图标后，两个数字之间补一道细分隔线，
   否则「3 天前 128」会糊成一片看不出是两个字段。 */
.fx-card-meta{
  display:flex; align-items:center; gap:10px; flex:none;
  font-size:12.4px; color:var(--fx-t3);
  font-variant-numeric:tabular-nums;
}
.fx-card-meta span{ display:inline-flex; align-items:center; gap:4px; }
.fx-card-meta .fx-meta-last{ padding-left:10px; border-left:1px solid var(--fx-line); }
.fx-meta-ico{ flex:none; opacity:.66; }

/* ==========================================================================
   7 · 紧凑列表
   ========================================================================== */
.fx-rows{ display:flex; flex-direction:column; gap:12px; }

.fx-row{
  display:flex; align-items:center; gap:18px;
  padding:14px 18px;
  border-radius:var(--fx-r);
  background:var(--fx-card);
  border:1px solid var(--fx-line);
  transition:transform .24s var(--fx-ease), background .24s var(--fx-ease),
             border-color .24s var(--fx-ease), box-shadow .24s var(--fx-ease);
}
.fx-row:hover{
  transform:translateX(3px);
  background:var(--fx-card-2);
  border-color:rgba(76,194,255,.28);
  box-shadow:var(--fx-shadow-sm);
}

.fx-row-thumb{
  width:112px; height:74px; flex:none;
  border-radius:var(--fx-r-s); overflow:hidden;
  background:var(--fx-bg-3); position:relative;
}
.fx-row-thumb img{ width:100%; height:100%; object-fit:cover; }
.fx-row-thumb .fx-thumb-ph{ font-size:24px; }

.fx-row-main{ flex:1; min-width:0; }
.fx-row-title{
  font-size:16.5px; font-weight:620; margin:0 0 5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fx-row-title a{ color:var(--fx-t1); }
.fx-row:hover .fx-row-title a{ color:var(--fx-brand); }
.fx-row-exc{
  font-size:14px; color:var(--fx-t3); margin:0 0 7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fx-row-meta{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  font-size:13.2px; color:var(--fx-t3);
}
.fx-row-meta span{ display:inline-flex; align-items:center; gap:4px; }

.fx-row-go{
  flex:none;
  font-size:14px; padding:8px 17px; border-radius:999px;
  background:var(--fx-fill-2); border:1px solid var(--fx-line);
  color:var(--fx-t2); white-space:nowrap;
  transition:.2s ease;
}
/* 箭头图标默认只在「收成圆形按钮」的场景出现（见 .fx-focus-list） */
.fx-row-go-ic{ display:none; width:16px; height:16px; flex:none; }
.fx-row:hover .fx-row-go{
  background:var(--fx-grad); color:#08111c; border-color:transparent;
}

/* ==========================================================================
   8 · 排行榜
   ========================================================================== */
.fx-ranks{
  display:grid; gap:var(--fx-gap);
  grid-template-columns:repeat(auto-fill, minmax(340px,1fr));
}
.fx-rank{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.fx-rank li{
  display:flex; align-items:center; gap:14px;
  padding:11px 12px; border-radius:var(--fx-r-s);
  transition:background .18s ease;
}
.fx-rank li:hover{ background:var(--fx-card); }

.fx-rank-n{
  width:26px; flex:none; text-align:center;
  font-size:16px; font-weight:730; font-variant-numeric:tabular-nums;
  color:var(--fx-t3);
}
.fx-rank li:nth-child(1) .fx-rank-n{ color:#fbbf24; }
.fx-rank li:nth-child(2) .fx-rank-n{ color:#cbd5e1; }
.fx-rank li:nth-child(3) .fx-rank-n{ color:#e8a06a; }

.fx-rank-main{ flex:1; min-width:0; }
.fx-rank-title{
  font-size:15.5px; font-weight:560; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fx-rank-title a{ color:var(--fx-t1); }
.fx-rank li:hover .fx-rank-title a{ color:var(--fx-brand); }
.fx-rank-meta{ font-size:13px; color:var(--fx-t3); }

.fx-rank-v{
  flex:none; font-size:13.5px; color:var(--fx-t3);
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   9 · 左长条 + 右编号榜
   ========================================================================== */
.fx-focus{
  display:grid; gap:var(--fx-gap);
  grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  align-items:start;
}

/* 左栏：带缩略图的长条。复用 .fx-row，但在半宽栏里要更紧凑一点 */
.fx-focus-list{ display:flex; flex-direction:column; gap:12px; }
.fx-focus-list .fx-row{ padding:11px 14px; gap:14px; }
.fx-focus-list .fx-row-thumb{ width:106px; height:69px; }
.fx-focus-list .fx-row-title{ font-size:15.6px; margin-bottom:4px; }
.fx-focus-list .fx-row-exc{ font-size:13.3px; margin-bottom:6px; }
.fx-focus-list .fx-row-meta{ font-size:12.5px; gap:11px; }
/* 半宽栏放不下「查看详情」药丸，收成一枚圆形箭头按钮（图标，不是 → 字符） */
.fx-focus-list .fx-row-go{
  width:34px; height:34px; padding:0; border-radius:50%;
  display:grid; place-items:center;
}
.fx-focus-list .fx-row-go-tx{ display:none; }
.fx-focus-list .fx-row-go-ic{ display:block; width:18px; height:18px; }

.fx-focus-side{ display:flex; flex-direction:column; gap:10px; }

.fx-fmini{
  display:flex; align-items:flex-start; gap:13px;
  padding:12px 14px;
  border-radius:var(--fx-r-s);
  background:var(--fx-card); border:1px solid var(--fx-line);
  position:relative; overflow:hidden;
  transition:transform .24s var(--fx-ease), background .24s var(--fx-ease),
             border-color .24s var(--fx-ease);
}
.fx-fmini::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--fx-grad); transform:scaleY(0); transform-origin:top;
  transition:transform .28s var(--fx-ease);
}
.fx-fmini:hover{
  transform:translateX(3px);
  background:var(--fx-card-2);
  border-color:rgba(76,194,255,.28);
}
.fx-fmini:hover::before{ transform:scaleY(1); }

.fx-fmini-n{
  width:26px; height:26px; flex:none; border-radius:var(--fx-r-xs);
  display:grid; place-items:center;
  font-size:13.5px; font-weight:680;
  background:var(--fx-fill-2); color:var(--fx-t3);
  font-variant-numeric:tabular-nums;
  transition:background .24s var(--fx-ease), color .24s var(--fx-ease);
}
/* 序号按名次由浓到淡：01 最亮且带描边，05 几乎融进底色 */
.fx-fmini:nth-child(1) .fx-fmini-n{ background:rgba(76,194,255,.30); color:#d8f1ff; box-shadow:inset 0 0 0 1px rgba(76,194,255,.55); font-weight:760; }
.fx-fmini:nth-child(2) .fx-fmini-n{ background:rgba(76,194,255,.20); color:#a9ddf8; }
.fx-fmini:nth-child(3) .fx-fmini-n{ background:rgba(76,194,255,.13); color:#88bdd9; }
.fx-fmini:nth-child(4) .fx-fmini-n{ background:rgba(76,194,255,.085); color:#7e9db1; }
.fx-fmini:nth-child(5) .fx-fmini-n{ background:rgba(76,194,255,.05); color:#72828f; }

.fx-fmini-main{ flex:1; min-width:0; }
.fx-fmini-title{
  font-size:15px; font-weight:560; color:var(--fx-t1);
  line-height:1.55; margin:0 0 6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fx-fmini:hover .fx-fmini-title{ color:var(--fx-brand); }
.fx-fmini-meta{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--fx-t3);
  font-variant-numeric:tabular-nums;
}
.fx-fmini-meta em{
  font-style:normal;
  padding:1.5px 7px; border-radius:5px;
  background:var(--fx-fill); border:1px solid var(--fx-line);
  transition:color .24s var(--fx-ease);
}
.fx-fmini-v{ margin-left:auto; }
.fx-fmini:hover .fx-fmini-meta em{ color:var(--fx-t2); }

/* 「换一批」：条目少的时候把右栏下方留白填住 */
.fx-fmini-more{
  margin-top:auto;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 14px;
  font-size:14px; color:var(--fx-t2);
  border-radius:var(--fx-r-s);
  background:var(--fx-fill); border:1px dashed var(--fx-line-2);
  transition:.22s var(--fx-ease);
}
.fx-fmini-more:hover{
  color:var(--fx-t1); background:var(--fx-fill-2);
  border-style:solid; border-color:rgba(76,194,255,.32);
}
.fx-fmini-more span{ display:inline-block; transition:transform .22s var(--fx-ease); }
.fx-fmini-more:hover span{ transform:translateX(3px); }

/* ==========================================================================
   9.5 · 首页两栏与侧边栏
   ========================================================================== */
.fx-home-cols{
  display:grid; gap:var(--fx-gap);
  grid-template-columns:minmax(0,1fr) 318px;
  align-items:start;
  margin-top:56px;              /* 与上方区块拉开，侧栏不会紧贴上面的元素 */
}
.fx-home-cols.fx-cols-tight{ margin-top:22px; }
.fx-home-cols > .fx-home-main > .fx-sec:first-child{ margin-top:0; }
/* 侧栏关掉时主栏跨满整行 */
.fx-home-main:last-child{ grid-column:1 / -1; }
.fx-home-main{ min-width:0; }
.fx-home-side{
  position:sticky; top:88px; min-width:0;
  display:flex; flex-direction:column; gap:var(--fx-gap);
}

/* 侧栏卡片容器 */
.fx-wid{
  border-radius:var(--fx-r);
  background:var(--fx-card);
  border:1px solid var(--fx-line);
  overflow:hidden;
}
.fx-wid-h{
  display:flex; align-items:center; gap:9px;
  padding:13px 16px;
  font-size:15.5px; font-weight:640; color:var(--fx-t1);
  border-bottom:1px solid var(--fx-line);
}
.fx-wid-h::before{
  content:""; width:3px; height:15px; border-radius:99px;
  background:var(--fx-grad); flex:none;
}
.fx-wid-h span{ margin-left:auto; font-size:12.5px; font-weight:520; color:var(--fx-t3); }
.fx-wid-b{ padding:8px; }

/* 侧栏排行：缩略图 + 名次角标 */
.fx-srank{ display:flex; flex-direction:column; gap:2px; }
.fx-srank a{
  display:flex; align-items:center; gap:11px;
  padding:8px; border-radius:var(--fx-r-s);
  transition:background .22s var(--fx-ease);
}
.fx-srank a:hover{ background:var(--fx-card-2); }
.fx-srank-th{
  width:58px; height:42px; flex:none; border-radius:var(--fx-r-xs);
  overflow:hidden; position:relative; background:var(--fx-bg-3);
}
.fx-srank-th img{ width:100%; height:100%; object-fit:cover; }
.fx-srank-th .fx-thumb-ph{ font-size:17px; }
.fx-srank-n{
  position:absolute; left:0; top:0; z-index:1;
  min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center;
  font-size:11.5px; font-weight:750; color:#08111c;
  background:rgba(154,165,186,.88);
  border-radius:0 0 var(--fx-r-xs) 0;
  font-variant-numeric:tabular-nums;
}
.fx-srank a:nth-child(1) .fx-srank-n{ background:#fbbf24; }
.fx-srank a:nth-child(2) .fx-srank-n{ background:#cbd5e1; }
.fx-srank a:nth-child(3) .fx-srank-n{ background:#e8a06a; }
.fx-srank-b{ display:block; min-width:0; flex:1; }
.fx-srank-t{
  font-size:14.2px; color:var(--fx-t1); line-height:1.5; font-weight:550;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .22s var(--fx-ease);
}
.fx-srank a:hover .fx-srank-t{ color:var(--fx-brand); }
.fx-srank-m{
  display:block; font-size:12.2px; color:var(--fx-t3);
  margin-top:3px; font-variant-numeric:tabular-nums;
}

/* 侧栏清单（分类 / 平台） */
.fx-slist{ display:flex; flex-direction:column; }
.fx-slist a{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--fx-r-xs);
  font-size:14.2px; color:var(--fx-t2);
  transition:background .2s var(--fx-ease), color .2s var(--fx-ease);
}
.fx-slist a:hover{ background:var(--fx-card-2); color:var(--fx-t1); }
.fx-slist a:hover .fx-slist-n{ color:var(--fx-brand); }
.fx-slist-dot{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--fx-c, var(--fx-brand));
}
.fx-slist-n{ margin-left:auto; font-size:12.5px; color:var(--fx-t3); font-variant-numeric:tabular-nums; }

/* 侧栏小标签云 */
.fx-stags{ display:flex; flex-wrap:wrap; gap:7px; padding:4px 2px; }
.fx-stags a{
  font-size:13px; padding:5px 10px; border-radius:var(--fx-r-xs);
  background:var(--fx-fill); border:1px solid var(--fx-line);
  color:var(--fx-t2);
  transition:.2s var(--fx-ease);
}
.fx-stags a:hover{
  background:rgba(76,194,255,.14); color:#8fd6ff;
  border-color:rgba(76,194,255,.26); transform:translateY(-1px);
}

/* 侧栏 · 站点介绍 + 数据统计 */
.fx-about{ padding:16px; }
.fx-about-top{ display:flex; align-items:center; gap:11px; }
.fx-about-logo{
  width:44px; height:44px; flex:none; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(76,194,255,.16), rgba(139,123,255,.11));
  border:1px solid rgba(76,194,255,.2);
}
.fx-about-logo img{ width:28px; height:28px; object-fit:contain; }
.fx-about-id{ min-width:0; flex:1; }
.fx-about-id b{
  display:block; font-size:15.5px; font-weight:640; color:var(--fx-t1);
  letter-spacing:.01em;
}
.fx-about-id i{
  display:block; font-style:normal; font-size:12.5px; color:var(--fx-t3);
  margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fx-about-txt{
  margin-top:13px; padding-top:13px; border-top:1px solid var(--fx-line);
  font-size:13.6px; line-height:1.86; color:var(--fx-t3);
}
.fx-about-txt p{ margin:0 0 9px; }
.fx-about-txt p:last-child{ margin:0; }
.fx-about-stats{
  margin-top:13px; padding-top:13px; border-top:1px solid var(--fx-line);
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
}
.fx-about-stat{
  background:var(--fx-well); border:1px solid var(--fx-line);
  border-radius:var(--fx-r-xs); padding:9px 11px;
  transition:border-color .22s var(--fx-ease);
}
.fx-about-stat:hover{ border-color:rgba(76,194,255,.26); }
.fx-about-stat b{
  display:block; font-size:20px; font-weight:700; line-height:1.2;
  color:var(--fx-t1); font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.fx-about-stat span{ display:block; font-size:12px; color:var(--fx-t3); margin-top:3px; }

/* ==========================================================================
   10 · 标签墙
   ========================================================================== */
.fx-tcloud{ display:flex; flex-wrap:wrap; gap:9px; }
.fx-tag{
  --fx-tc:var(--fx-brand);
  font-size:14px; padding:7px 14px;
  /* 跟着卡片标签一起改成小圆角矩形，页面语言统一 */
  border-radius:var(--fx-r-xs);
  background:var(--fx-card);
  border:1px solid var(--fx-line);
  color:var(--fx-t2);
  transition:transform .22s var(--fx-ease), background .22s var(--fx-ease),
             color .22s var(--fx-ease), border-color .22s var(--fx-ease);
}
.fx-tag:hover{
  transform:translateY(-2px);
  background:color-mix(in srgb, var(--fx-tc) 17%, var(--fx-card));
  border-color:color-mix(in srgb, var(--fx-tc) 42%, transparent);
  color:#fff;
}
.fx-tag-n{ opacity:.6; font-size:12.5px; margin-left:5px; }

/* ==========================================================================
   11 · 归档页 · 页头与筛选
   ========================================================================== */
.fx-arch-head{
  margin-top:30px; padding:26px 28px;
  border-radius:var(--fx-r);
  background:linear-gradient(150deg, rgba(76,194,255,.08), rgba(139,123,255,.05) 60%, transparent);
  border:1px solid var(--fx-line);
}
.fx-arch-head h1{ font-size:25px; margin:0 0 8px; }
.fx-arch-desc{ color:var(--fx-t2); font-size:15px; margin:0; max-width:800px; line-height:1.8; }
.fx-arch-desc p:last-child{ margin:0; }
.fx-arch-count{ font-size:14px; color:var(--fx-t3); margin-top:8px; }

.fx-filter{
  margin-top:20px; padding:16px 20px;
  border-radius:var(--fx-r);
  background:var(--fx-fill); border:1px solid var(--fx-line);
  display:flex; flex-direction:column; gap:13px;
}
.fx-filter-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fx-filter-label{
  font-size:13.5px; color:var(--fx-t3); flex:none;
  min-width:56px; letter-spacing:.03em;
}
.fx-chips{ display:flex; flex-wrap:wrap; gap:8px; }

.fx-chip{
  font-size:14px; padding:5.5px 14px; border-radius:999px;
  background:var(--fx-fill-2); border:1px solid var(--fx-line);
  color:var(--fx-t2); transition:.2s ease;
}
.fx-chip:hover{ color:var(--fx-t1); border-color:var(--fx-line-2); }
.fx-chip.on{
  background:var(--fx-grad); color:#08111c;
  border-color:transparent; font-weight:600;
}

.fx-filter-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-top:12px; border-top:1px solid var(--fx-line);
}
.fx-viewtoggle{ display:flex; gap:6px; }
.fx-viewtoggle a{
  font-size:13.5px; padding:5px 13px; border-radius:8px;
  background:var(--fx-fill-2); border:1px solid var(--fx-line);
  color:var(--fx-t3);
}
.fx-viewtoggle a.on{ background:rgba(76,194,255,.14); color:#8fd6ff; border-color:rgba(76,194,255,.26); }

/* ==========================================================================
   12 · 资源详情页
   ========================================================================== */
.fx-art{ margin-top:28px; }

.fx-crumb{
  font-size:14px; color:var(--fx-t3);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:16px;
}
.fx-crumb a{ color:var(--fx-t3); }
.fx-crumb a:hover{ color:var(--fx-brand); }
.fx-crumb i{ font-style:normal; opacity:.5; }

.fx-art-title{ font-size:clamp(23px,2.6vw,31px); font-weight:720; margin:0 0 14px; line-height:1.42; }

.fx-art-meta{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:14px; color:var(--fx-t3);
  padding-bottom:20px; margin-bottom:24px;
  border-bottom:1px solid var(--fx-line);
}
.fx-art-meta .fx-tag-cat,
.fx-art-meta .fx-tag-plat{ font-size:13px; }

.fx-art-cover{
  border-radius:var(--fx-r); overflow:hidden;
  border:1px solid var(--fx-line);
  margin-bottom:28px; background:var(--fx-bg-3);
}
.fx-art-cover img{
  width:100%; display:block;
  max-height:420px; object-fit:cover;
}

.fx-art-body{
  font-size:16.6px; line-height:1.95; color:#d4dbe8;
  max-width:100%;               /* 两栏后正文与侧栏对齐，不再右侧留空 */
}
.fx-art-body h2{
  font-size:21px; margin:2em 0 .7em; padding-left:13px;
  border-left:3px solid var(--fx-brand); line-height:1.5;
}
.fx-art-body h3{ font-size:18px; margin:1.6em 0 .6em; color:#e9edf5; }
.fx-art-body ul,.fx-art-body ol{ padding-left:1.35em; margin:0 0 1.2em; }
.fx-art-body li{ margin-bottom:.5em; }
.fx-art-body a{ border-bottom:1px solid rgba(76,194,255,.35); }
.fx-art-body img{ border-radius:var(--fx-r-s); margin:1.2em 0; border:1px solid var(--fx-line); }
.fx-art-body blockquote{
  margin:1.4em 0; padding:14px 20px;
  background:var(--fx-fill); border-left:3px solid var(--fx-brand-2);
  border-radius:0 var(--fx-r-s) var(--fx-r-s) 0;
  color:var(--fx-t2); font-size:15.6px;
}
.fx-art-body code{
  font-family:var(--fx-mono); font-size:.88em;
  background:rgba(255,255,255,.075); padding:2px 7px; border-radius:5px;
  color:#9fe3ff;
}
.fx-art-body pre{
  background:#0d1119; border:1px solid var(--fx-line);
  padding:16px 18px; border-radius:var(--fx-r-s); overflow-x:auto;
  font-size:14.4px; line-height:1.7;
}
.fx-art-body pre code{ background:none; padding:0; color:#c7d4e6; }
.fx-art-body table{ width:100%; border-collapse:collapse; margin:1.4em 0; font-size:15px; }
.fx-art-body th{
  text-align:left; padding:11px 14px; font-weight:640;
  background:rgba(76,194,255,.1);
  border-bottom:2px solid rgba(76,194,255,.3);
}
.fx-art-body td{ padding:11px 14px; border-bottom:1px solid var(--fx-line); color:var(--fx-t2); }

/* ---- 获取资源区块 ---- */
.fx-get{
  margin:34px 0;
  border-radius:var(--fx-r);
  background:linear-gradient(150deg, rgba(76,194,255,.085), rgba(139,123,255,.055));
  border:1px solid rgba(76,194,255,.22);
  padding:26px 28px;
}
.fx-get-h{
  display:flex; align-items:center; gap:10px;
  font-size:18.5px; font-weight:680; margin:0 0 6px;
}
.fx-get-h .fx-get-ico{
  width:30px; height:30px; border-radius:9px; flex:none;
  display:grid; place-items:center; font-size:16px;
  background:var(--fx-grad); color:#08111c;
}
.fx-get-tip{ font-size:14.5px; color:var(--fx-t2); margin:0 0 20px; line-height:1.75; }

.fx-get-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 32px; border-radius:999px;
  background:var(--fx-grad); color:#08111c;
  font-size:17px; font-weight:680;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fx-get-btn:hover{
  color:#08111c; transform:translateY(-2px);
  box-shadow:0 12px 30px -6px rgba(76,194,255,.5);
}

.fx-get-alt{ margin-top:18px; display:flex; flex-direction:column; gap:11px; }

.fx-get-field{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:rgba(11,14,20,.55);
  border:1px solid var(--fx-line);
  border-radius:var(--fx-r-s);
  padding:11px 15px;
  max-width:640px;
}
.fx-get-k{ font-size:13.5px; color:var(--fx-t3); flex:none; min-width:62px; }
.fx-get-v{
  font-family:var(--fx-mono); font-size:14.4px; color:#9fe3ff;
  word-break:break-all; flex:1; min-width:0;
}
.fx-get-copy{
  flex:none; cursor:pointer; font-family:inherit;
  font-size:13.5px; padding:5px 13px; border-radius:7px;
  background:var(--fx-fill-2); border:1px solid var(--fx-line);
  color:var(--fx-t2); transition:.18s ease;
}
.fx-get-copy:hover{ background:rgba(76,194,255,.16); color:#8fd6ff; border-color:rgba(76,194,255,.3); }
.fx-get-copy.done{ background:rgba(52,211,153,.18); color:#6ee7b7; border-color:rgba(52,211,153,.3); }

/* 引导型：一句话 + 二维码 */
.fx-get-guide{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:rgba(11,14,20,.5);
  border:1px solid var(--fx-line);
  border-radius:var(--fx-r-s);
  padding:20px 22px;
}
.fx-get-guide-txt{ flex:1; min-width:230px; }
.fx-get-guide-txt p{ margin:0; font-size:16px; color:var(--fx-t1); line-height:1.85; }
.fx-get-qr{ flex:none; text-align:center; }
.fx-get-qr img{
  width:148px; height:148px; object-fit:contain;
  border-radius:var(--fx-r-s); background:#fff; padding:7px;
  border:1px solid var(--fx-line);
}
.fx-get-qr span{ display:block; font-size:13px; color:var(--fx-t3); margin-top:7px; }

/* 失效态 */
.fx-get.dead{
  background:rgba(248,113,113,.06);
  border-color:rgba(248,113,113,.26);
}
.fx-get.dead .fx-get-h .fx-get-ico{ background:rgba(248,113,113,.85); }
.fx-get.dead .fx-get-btn{
  background:var(--fx-fill-2); color:var(--fx-t3);
  pointer-events:none; box-shadow:none; transform:none;
}

/* ---- 规格表 ---- */
.fx-spec{
  margin:30px 0;
  border-radius:var(--fx-r);
  background:var(--fx-fill); border:1px solid var(--fx-line);
  overflow:hidden;
}
.fx-spec-h{
  padding:14px 22px; font-size:16px; font-weight:660;
  border-bottom:1px solid var(--fx-line);
  background:rgba(255,255,255,.02);
}
.fx-spec-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.fx-spec-item{
  display:flex; align-items:baseline; gap:12px;
  padding:13px 22px; border-bottom:1px solid var(--fx-line);
}
.fx-spec-k{ font-size:14px; color:var(--fx-t3); flex:none; min-width:72px; }
.fx-spec-v{ font-size:15px; color:var(--fx-t1); }

/* ---- 相关资源 ---- */
.fx-related{ margin-top:46px; padding-top:32px; border-top:1px solid var(--fx-line); }

/* ==========================================================================
   13 · 分页 / 空态 / 页脚
   ========================================================================== */
.fx-pager{ margin:44px 0 10px; display:flex; justify-content:center; }
.fx-pager .page-numbers{
  display:inline-grid; place-items:center;
  min-width:39px; height:39px; padding:0 12px; margin:0 4px;
  border-radius:10px; background:var(--fx-fill);
  border:1px solid var(--fx-line); color:var(--fx-t2);
  font-size:15px;
}
.fx-pager .page-numbers:hover{ background:var(--fx-fill-2); color:var(--fx-t1); }
.fx-pager .page-numbers.current{
  background:var(--fx-grad); color:#08111c; border-color:transparent; font-weight:650;
}

.fx-empty{
  padding:70px 24px; text-align:center;
  border-radius:var(--fx-r); background:var(--fx-fill); border:1px solid var(--fx-line);
}
.fx-empty-ico{ font-size:44px; opacity:.4; margin-bottom:14px; }
.fx-empty h3{ font-size:19px; margin:0 0 8px; }
.fx-empty p{ color:var(--fx-t3); font-size:15px; margin:0; }

.fx-footer{
  margin-top:76px;
  border-top:1px solid var(--fx-line);
  background:rgba(255,255,255,.014);
}
.fx-footer-in{
  padding:44px 0 30px;
  display:grid; gap:34px;
  grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(150px,1fr));
}
.fx-footer-brand p{ color:var(--fx-t3); font-size:14.4px; line-height:1.85; margin:12px 0 0; max-width:420px; }
.fx-footer-col h4{ font-size:15px; margin:0 0 14px; color:var(--fx-t1); }
.fx-footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.fx-footer-col a{ font-size:14.4px; color:var(--fx-t3); }
.fx-footer-col a:hover{ color:var(--fx-brand); }

.fx-footer-note{
  padding:20px 0 32px; border-top:1px solid var(--fx-line);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:13.6px; color:var(--fx-t3);
}
.fx-footer-note p{ margin:0; }
.fx-disclaimer{ max-width:820px; line-height:1.8; }

/* ==========================================================================
   14 · 工具类
   ========================================================================== */
.fx-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 24px; border-radius:999px;
  background:var(--fx-grad); color:#08111c;
  font-size:15.5px; font-weight:640;
  transition:transform .2s ease, box-shadow .2s ease;
}
.fx-btn:hover{ color:#08111c; transform:translateY(-1px); box-shadow:0 8px 22px rgba(76,194,255,.32); }
.fx-btn-ghost{
  background:var(--fx-fill); color:var(--fx-t1);
  border:1px solid var(--fx-line);
}
.fx-btn-ghost:hover{ background:var(--fx-fill-2); color:var(--fx-t1); box-shadow:none; }

.fx-404{ text-align:center; padding:90px 20px; }
.fx-404 h1{ font-size:76px; margin:0; background:var(--fx-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ==========================================================================
   15 · 响应式
   ========================================================================== */
@media (max-width:1080px){
  :root{ --fx-gap:18px; }
  /* 必须写 minmax(0,1fr)：光写 1fr 时轨道下限是 min-content，
     而长条标题是 white-space:nowrap，会把整列撑出容器造成横向溢出（实测 354 容器里撑到 691px） */
  .fx-focus{ grid-template-columns:minmax(0,1fr); }
  /* 单列时左栏长条铺满整宽，缩略图可以给大一点 */
  .fx-focus-list .fx-row{ padding:13px 16px; gap:16px; }
  .fx-focus-list .fx-row-thumb{ width:132px; height:86px; }
  .fx-home-cols{ grid-template-columns:1fr; }
  /* 侧栏不再跟在右侧，改成横向卡片铺开，不会拖出一长条 */
  .fx-home-side{
    position:static;
    display:grid; align-items:start;
    grid-template-columns:repeat(auto-fit, minmax(262px, 1fr));
  }
}

@media (max-width:860px){
  .fx-wrap{ padding:0 18px; }

  /* 桌面端靠 .fx-nav 的 flex:1 把操作区顶到右边；这里导航被隐藏，
     那个占位就没了 —— 必须自己把操作区推到右侧，否则菜单按钮会
     紧贴 logo 停在左边。 */
  .fx-head-act{ margin-left:auto; }

  /* 菜单面板：不再用 display 切换（那样没法做过渡），
     改成 opacity + 位移 + visibility。 */
  .fx-nav{
    display:block;
    position:absolute; left:0; right:0; top:64px;
    background:rgba(13,17,25,.97);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--fx-line);
    box-shadow:0 24px 46px -24px rgba(0,0,0,.88);
    padding:12px 18px 18px;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .24s var(--fx-ease), transform .3s var(--fx-ease),
               visibility 0s linear .3s;
  }
  .fx-nav.open{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:none;
    transition:opacity .24s var(--fx-ease), transform .3s var(--fx-ease), visibility 0s;
  }
  .fx-nav ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .fx-nav a{ display:block; padding:11px 14px; font-size:16px; }

  /* 菜单项自上而下依次落位，第 1 条最先，逐条 +45ms */
  .fx-nav li{
    opacity:0; transform:translateY(-7px);
    transition:opacity .3s var(--fx-ease), transform .3s var(--fx-ease);
  }
  .fx-nav.open li{ opacity:1; transform:none; }
  .fx-nav.open li:nth-child(1){ transition-delay:.04s; }
  .fx-nav.open li:nth-child(2){ transition-delay:.085s; }
  .fx-nav.open li:nth-child(3){ transition-delay:.13s; }
  .fx-nav.open li:nth-child(4){ transition-delay:.175s; }
  .fx-nav.open li:nth-child(5){ transition-delay:.22s; }
  .fx-nav.open li:nth-child(6){ transition-delay:.265s; }
  .fx-nav.open li:nth-child(7){ transition-delay:.31s; }
  .fx-nav.open li:nth-child(n+8){ transition-delay:.355s; }

  .fx-nav-toggle{ display:grid; }
  .fx-header-in{ gap:14px; }
  .fx-head-search{ display:none; }

  /* 顶栏吸附在页顶之后加深底色。手机屏窄、内容密，菜单文字后面直接跑内容会看不清；
     .fx-stuck 由 main.js 按滚动位置挂，桌面端不套这条（只改移动端）。 */
  .fx-header.fx-stuck{
    background:rgba(11,14,20,.97);
    backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
    border-bottom-color:rgba(128,140,160,.26);
    box-shadow:0 12px 32px -20px rgba(0,0,0,.92);
  }

  .fx-hero{ padding:40px 22px 36px; border-radius:18px; }
  .fx-hero-form{ flex-direction:column; border-radius:var(--fx-r); padding:12px; }
  .fx-hero-btn{ width:100%; height:46px; }
  /* 四个数字必须挤在一行 —— 收窄列间距、把标签压小一档 */
  .fx-hero-stats{ gap:14px 28px; }
  .fx-stat-n{ font-size:21px; }
  .fx-stat-l{ font-size:13px; }

  /* .fx-grid 交给 auto-fill 自己算列数：≤860 时它会落成 2 列（约 356px 一张），
     比强行压成 1 列好看；到 560 以下才自然变单列 */
  .fx-ranks{ grid-template-columns:1fr; }

  .fx-row{ flex-wrap:wrap; }
  .fx-row-thumb{ width:88px; height:60px; }
  .fx-row-go{ display:none; }

  /* 随机推荐的圆形箭头在手机上加一档：手指点得到，视觉上也不再是「一枚小点」 */
  .fx-focus-list .fx-row-go{ width:38px; height:38px; }
  .fx-focus-list .fx-row-go-ic{ width:20px; height:20px; }
  /* 手机上的随机推荐不显示时间：标题 + 摘要已经把长条填满，
     再留时间会把元信息挤到第二行，长条就变高了 */
  .fx-focus-list .fx-row-time{ display:none; }

  .fx-spec-grid{ grid-template-columns:1fr; }
  .fx-get{ padding:22px 18px; }
  .fx-get-guide{ gap:16px; }
  .fx-get-qr img{ width:124px; height:124px; }
  .fx-art-body{ font-size:16.2px; }
}

@media (max-width:560px){
  /* 小屏上把四个统计数字排成等宽四列 —— flex + 内容宽排版在 390 宽下一定断成两行 */
  .fx-hero-stats{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px 6px; margin-top:24px; padding-top:20px;
  }
  .fx-stat{ min-width:0; }
  .fx-stat-n{ font-size:19px; }
  .fx-stat-l{ font-size:11.5px; line-height:1.4; }

  .fx-cats{ grid-template-columns:1fr 1fr; gap:12px; }
  .fx-cat{ padding:13px 12px 12px; }
  .fx-cat-ico{ width:34px; height:34px; border-radius:10px; }
  .fx-cat-ico svg{ width:17px; height:17px; }
  .fx-cat-n{ display:none; }        /* 两列放不下数量徽标 */
  .fx-cat-name{ font-size:15.5px; }
  .fx-cat-desc{ display:none; }
  .fx-cat-go{ display:none; }
  .fx-sec{ margin-top:40px; }
  .fx-sec-title{ font-size:20px; }
  .fx-sec-title::before{ height:17px; }
  .fx-card-title{ font-size:16.5px; }
  .fx-brand-text{ font-size:17px; }
  .fx-brand-mark{ width:48px; height:24px; }
}

/* ==========================================================================
   16 · 进入视窗微动画
   --------------------------------------------------------------------------
   机制照搬子比主题的 .obs-animate / .in-view：元素初始透明 + 一点位移，
   进入视窗后由 JS 加一个 class 播放动画。参数上刻意收敛 —— 子比是
   56px / .6s，这里压到 22px / .62s，属于「感觉得到但不抢戏」的量级。

   两个实现取舍，都是踩过才知道的：

   1) 用 @keyframes 而不是 transition。
      卡片自身带 hover 用的 `transition:transform .28s`；如果进场也走
      transition，同一条 transform 通道会被拖成 .62s，hover 上移变得黏滞。
      animation 走独立的动画层，和元素的 transition 互不干扰。

   2) fill-mode 用 backwards，不用 both。
      both/forwards 会在动画结束后继续把 `transform:none` 顶在最前面，
      hover 的 translateY(-3px) 就永远不生效。backwards 只在 delay 期间
      保持起始态（正好用来做 stagger 的「排队等待」），结束后立刻把
      样式控制权交还给元素本身。

   3) 全部规则挂在 html.fx-anim 之下。
      只有 JS 真的跑起来（且浏览器支持）才会加上这个类；脚本被拦、
      报错、或用户禁用了 JS 时，选择器不匹配，内容照常显示 —— 不会
      出现「整页空白」这种不可用的最坏情况。
   ========================================================================== */
html.fx-anim .fx-rv{ opacity:0; }
html.fx-anim .fx-rv.fx-rv-in{ opacity:1; }

html.fx-anim .fx-rv-in.fx-rv-up{   animation:fx-rv-up   .62s var(--fx-ease) var(--fx-rvd,0s) backwards; }
html.fx-anim .fx-rv-in.fx-rv-x{    animation:fx-rv-x    .62s var(--fx-ease) var(--fx-rvd,0s) backwards; }
html.fx-anim .fx-rv-in.fx-rv-zoom{ animation:fx-rv-zoom .58s var(--fx-ease) var(--fx-rvd,0s) backwards; }
html.fx-anim .fx-rv-in.fx-rv-soft{ animation:fx-rv-soft .70s var(--fx-ease) var(--fx-rvd,0s) backwards; }

@keyframes fx-rv-up{   from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes fx-rv-x{    from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }
@keyframes fx-rv-zoom{ from{ opacity:0; transform:scale(.955); }      to{ opacity:1; transform:none; } }
@keyframes fx-rv-soft{ from{ opacity:0; }                            to{ opacity:1; } }

/* 用户在系统里要求减少动效 → 不位移、不淡入，内容直接呈现 */
@media (prefers-reduced-motion:reduce){
  html.fx-anim .fx-rv{ opacity:1 !important; }
  html.fx-anim .fx-rv-in{ animation:none !important; }
  /* 移动端菜单同理：只保留显示/隐藏，去掉位移与错峰 */
  .fx-nav, .fx-nav li{
    transition:none !important; transform:none !important;
  }
  .fx-nav li{ opacity:1 !important; }
  .fx-bars i, .fx-nav-toggle{ transition:none !important; animation:none !important; }
  .fx-cat:hover{ transform:none !important; }
}

/* 打印时把还没进场的元素放出来，否则打在纸上是一片空白 */
@media print{
  html.fx-anim .fx-rv{ opacity:1 !important; }
  html.fx-anim .fx-rv-in{ animation:none !important; }
}