/* ==========================================================
   同好接口 /interests/ 专属样式
   仅本页加载（scripts/interests.js 只给 /interests/ 注入 <link>）
   选择器全部 .thx- 前缀，不影响其他页面
   数据源 source/_data/interests.yml · 渲染 scripts/interests.js

   等级视觉：1 绿 · 2 蓝 · 3 橙 · 4 红 · 5 紫 · 6 炫彩
   每个 .thx-lv-N 只定义 CSS 变量（颜色/花纹/动效参数），
   所以类名可以挂在任何元素上（页脚图例的小色块就是这么复用的），
   改一次等级配色，卡片和图例会同时变，不会漂移。
   凡是带动效/阴影的规则一律写成 .thx-card.thx-lv-N，避免误伤其他元素。
   ========================================================== */

/* 让 --thx-ang 能被动画驱动（高级等级环的旋转扫光）。
   浏览器不支持 @property 时，环退化成静态渐变，不影响可读性。 */
@property --thx-ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.thx {
  font-size: 14px;
  line-height: 1.75;
  color: var(--anzhiyu-fontcolor, #363636);
}

/* ---- 页头 ---- */
.thx-meta {
  font-size: 13px;
  opacity: 0.62;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}
.thx-meta .thx-dot {
  margin: 0 7px;
  opacity: 0.5;
}
.thx-intro {
  font-size: 15px;
  line-height: 1.85;
  margin: 0 0 8px;
  padding: 14px 18px;
  border-radius: 10px;
  border-left: 3px solid var(--anzhiyu-main, #43a6c6);
  background: rgba(67, 166, 198, 0.07);
}

/* ---- 区块 ---- */
.thx .thx-group {
  margin-top: 34px;
}
.thx-sec-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
  padding-left: 11px;
  border-left: 4px solid var(--anzhiyu-main, #43a6c6);
  line-height: 1.3;
}
.thx-sec-sub {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.55;
}

/* ---- 高亮三件事 ---- */
.thx-spotlight {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.thx-spot {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--anzhiyu-card-bg, #fff);
  border: 1px solid rgba(67, 166, 198, 0.22);
}
.thx-spot-name {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 5px;
}
.thx-spot-note {
  font-size: 12.5px;
  line-height: 1.65;
  opacity: 0.7;
}

/* ==========================================================
   卡片本体
   ========================================================== */
.thx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 13px;
}
.thx-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 13px 18px;
  border-radius: 12px;
  /* 底色用 background-color（暗色模式是深色），色调用 background-image 叠加，
     直接写 background: rgba(...) 会在暗色模式下露出页面背景 */
  background-color: var(--anzhiyu-card-bg, #fff);
  background-image: var(--thx-tint-img, none),
    linear-gradient(var(--thx-tint, transparent), var(--thx-tint, transparent));
  border: 1px solid var(--thx-edge, rgba(128, 128, 128, 0.16));
  box-shadow: var(--thx-shadow, none);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
/* 文字层压到装饰层之上。
   角标 .thx-flag 要自己 absolute 定位，所以从这条规则里排除掉。 */
.thx-card > *:not(.thx-deco):not(.thx-flag) {
  position: relative;
  z-index: 1;
}

/* 左侧等级色条（宽度/颜色由 thx-lv-N 给） */
.thx-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: var(--thx-bar-w, 0);
  background: var(--thx-bar-c, transparent);
  border-radius: 12px 0 0 12px;
  box-shadow: 0 0 10px var(--thx-glow, transparent);
}

/* 斜向流光：一道光带缓缓扫过卡片（4 级起启用） */
.thx-card::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  z-index: 0;
  width: 38%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--thx-sheen, transparent), transparent);
  opacity: var(--thx-sheen-o, 0);
  transform: rotate(18deg) translateX(-180%);
  animation: var(--thx-sheen-anim, none);
}
@keyframes thx-sheen {
  0% {
    transform: rotate(18deg) translateX(-180%);
  }
  55%,
  100% {
    transform: rotate(18deg) translateX(460%);
  }
}

.thx-card:hover {
  transform: translateY(-3px);
  border-color: var(--thx-edge-hover, var(--thx-edge, rgba(67, 166, 198, 0.45)));
}

/* ==========================================================
   装饰层：角饰 / 花纹 / 渐变描边环
   .thx-deco        → 四角花纹（background-image）
   .thx-deco::before → 描边环（用 mask 只留边缘，可做流动/旋转）
   .thx-deco::after  → 底纹（斜纹、星点等）
   ========================================================== */
.thx-deco {
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--thx-corner-img, none);
  background-repeat: no-repeat;
  background-position: var(--thx-corner-pos, 0 0);
  background-size: var(--thx-corner-size, 0 0);
  outline: var(--thx-frame2-w, 0) solid var(--thx-frame2, transparent);
  outline-offset: -4px;
}
.thx-deco::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.4px;
  border-radius: inherit;
  background-image: var(--thx-ring-img, none);
  background-size: var(--thx-ring-size, 100% 100%);
  background-position: 0 50%;
  opacity: var(--thx-ring-o, 0);
  animation: var(--thx-ring-anim, none);
  /* 只留 1.4px 的边缘当描边环（两层遮罩取异或）。
     万一浏览器不支持 mask，退化成卡片内一层柔光，文字仍在它上面，不会糊住内容。 */
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
}
.thx-deco::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--thx-pat, none);
  background-repeat: repeat;
  background-size: var(--thx-pat-size, auto);
  background-position: var(--thx-pat-pos, 0 0);
  opacity: var(--thx-pat-o, 0);
  animation: var(--thx-pat-anim, none);
}
@keyframes thx-flow {
  from {
    background-position: 0 50%;
  }
  to {
    background-position: 200% 50%;
  }
}
@keyframes thx-rot {
  to {
    --thx-ang: 360deg;
  }
}
@keyframes thx-hue {
  to {
    filter: hue-rotate(360deg);
  }
}
@keyframes thx-drift {
  from {
    background-position: 0 0, 12px 20px;
  }
  to {
    background-position: 40px 40px, 75px 83px;
  }
}
@keyframes thx-pulse-5 {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.3), 0 3px 16px rgba(168, 85, 247, 0.2);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.65), 0 7px 32px rgba(168, 85, 247, 0.42);
  }
}
@keyframes thx-pulse-6 {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(255, 93, 208, 0.45), 0 4px 20px rgba(56, 189, 248, 0.3),
      0 4px 32px rgba(167, 139, 250, 0.26);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(255, 179, 71, 0.75), 0 6px 34px rgba(255, 93, 93, 0.4),
      0 6px 52px rgba(74, 222, 128, 0.3);
  }
}

/* ==========================================================
   等级配色（只设变量，不设具体属性）
   ========================================================== */

/* --- Lv1 了解 · 绿：最朴素，只有一道绿边 + 色条 --- */
.thx-lv-1 {
  --thx-c: #34c77b;
  --thx-bar-w: 3px;
  --thx-bar-c: #34c77b;
  --thx-ink: #1f8f56;
  --thx-edge: rgba(52, 199, 123, 0.34);
  --thx-edge-hover: rgba(52, 199, 123, 0.62);
  --thx-tint: rgba(52, 199, 123, 0.05);
  --thx-glow: rgba(52, 199, 123, 0.26);
  --thx-medal-bg: radial-gradient(circle at 50% 26%, #86efac, #34c77b 46%, #15803d);
  --thx-medal-ring: rgba(52, 199, 123, 0.45);
}

/* --- Lv2 接触 · 蓝：加一条静态渐变描边 + 两个对角花纹 --- */
.thx-lv-2 {
  --thx-c: #3b82f6;
  --thx-bar-w: 3px;
  --thx-bar-c: #3b82f6;
  --thx-edge: rgba(59, 130, 246, 0.34);
  --thx-edge-hover: rgba(59, 130, 246, 0.6);
  --thx-tint: rgba(59, 130, 246, 0.055);
  --thx-shadow: 0 1px 8px rgba(59, 130, 246, 0.1);
  --thx-glow: rgba(59, 130, 246, 0.28);
  --thx-medal-bg: radial-gradient(circle at 50% 26%, #93c5fd, #3b82f6 46%, #1d4ed8);
  --thx-medal-ring: rgba(59, 130, 246, 0.45);
  --thx-ring-img: linear-gradient(
    120deg,
    rgba(59, 130, 246, 0),
    rgba(59, 130, 246, 0.9),
    rgba(59, 130, 246, 0)
  );
  --thx-ring-o: 0.6;
  --thx-corner-img: radial-gradient(circle, rgba(59, 130, 246, 0.85) 0 1.5px, transparent 2.1px),
    radial-gradient(circle, rgba(59, 130, 246, 0.85) 0 1.5px, transparent 2.1px);
  --thx-corner-pos: 9px 9px, calc(100% - 9px) calc(100% - 9px);
  --thx-corner-size: 5px 5px, 5px 5px;
}

/* --- Lv3 常用 · 橙：四角花纹 + 斜纹底 + 缓慢流动的光环 + 内衬细线 --- */
.thx-lv-3 {
  --thx-c: #f59e0b;
  --thx-ink: #b45309;
  --thx-bar-w: 4px;
  --thx-bar-c: #f59e0b;
  --thx-edge: rgba(245, 158, 11, 0.48);
  --thx-edge-hover: rgba(245, 158, 11, 0.8);
  --thx-tint: rgba(245, 158, 11, 0.072);
  --thx-shadow: 0 2px 10px rgba(245, 158, 11, 0.14);
  --thx-glow: rgba(245, 158, 11, 0.36);
  --thx-medal-bg: radial-gradient(circle at 50% 26%, #fcd34d, #f59e0b 46%, #b45309);
  --thx-medal-ring: rgba(245, 158, 11, 0.5);
  --thx-ring-w: 1.8px;
  --thx-ring-o: 1;
  --thx-ring-size: 200% 100%;
  --thx-ring-anim: thx-flow 7s linear infinite;
  --thx-ring-img: linear-gradient(
    90deg,
    rgba(245, 158, 11, 0) 0%,
    #f59e0b 26%,
    #fde68a 42%,
    #f59e0b 58%,
    #fbbf24 74%,
    rgba(245, 158, 11, 0) 100%
  );
  --thx-frame2-w: 1px;
  --thx-frame2: rgba(245, 158, 11, 0.22);
  --thx-pat: repeating-linear-gradient(
    45deg,
    rgba(245, 158, 11, 0.085) 0 1px,
    transparent 1px 8px
  );
  --thx-pat-o: 1;
  --thx-corner-img: radial-gradient(circle, #f59e0b 0 2.6px, transparent 3.3px),
    radial-gradient(circle, #f59e0b 0 2.6px, transparent 3.3px),
    radial-gradient(circle, #f59e0b 0 2.6px, transparent 3.3px),
    radial-gradient(circle, #f59e0b 0 2.6px, transparent 3.3px);
  --thx-corner-pos: 10px 10px, calc(100% - 18px) 10px, 10px calc(100% - 18px),
    calc(100% - 18px) calc(100% - 18px);
  --thx-corner-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px;
}

/* --- Lv4 熟练 · 红：旋转光环 + 流光扫过 + 密斜纹 + 内衬线 --- */
.thx-lv-4 {
  --thx-c: #ef4444;
  --thx-bar-w: 4px;
  --thx-bar-c: #ef4444;
  --thx-edge: rgba(239, 68, 68, 0.48);
  --thx-edge-hover: rgba(239, 68, 68, 0.78);
  --thx-tint: rgba(239, 68, 68, 0.075);
  --thx-shadow: 0 2px 12px rgba(239, 68, 68, 0.14);
  --thx-glow: rgba(239, 68, 68, 0.36);
  --thx-medal-bg: radial-gradient(circle at 50% 26%, #fca5a5, #ef4444 46%, #991b1b);
  --thx-medal-ring: rgba(239, 68, 68, 0.5);
  --thx-ring-img: conic-gradient(
    from var(--thx-ang),
    rgba(239, 68, 68, 0) 0deg,
    #ef4444 50deg,
    #fca5a5 100deg,
    #991b1b 160deg,
    rgba(239, 68, 68, 0) 230deg,
    rgba(239, 68, 68, 0) 360deg
  );
  --thx-ring-o: 1;
  --thx-ring-anim: thx-rot 6s linear infinite;
  --thx-frame2-w: 1px;
  --thx-frame2: rgba(239, 68, 68, 0.2);
  --thx-pat: repeating-linear-gradient(
      -45deg,
      rgba(239, 68, 68, 0.065) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0 1px, transparent 1px 26px);
  --thx-pat-o: 1;
  --thx-sheen: rgba(239, 68, 68, 0.16);
  --thx-sheen-o: 1;
  --thx-sheen-anim: thx-sheen 5s ease-in-out infinite;
  --thx-corner-img: radial-gradient(circle, #ef4444 0 2.2px, transparent 2.8px),
    radial-gradient(circle, #ef4444 0 2.2px, transparent 2.8px),
    radial-gradient(circle, #ef4444 0 2.2px, transparent 2.8px),
    radial-gradient(circle, #ef4444 0 2.2px, transparent 2.8px);
  --thx-corner-pos: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px);
  --thx-corner-size: 7px 7px, 7px 7px, 7px 7px, 7px 7px;
}

/* --- Lv5 精通 · 紫：呼吸光晕 + 更快旋转的紫环 + 发光角饰 --- */
.thx-lv-5 {
  --thx-c: #a855f7;
  --thx-ink: #7e22ce;
  --thx-bar-w: 5px;
  --thx-bar-c: linear-gradient(180deg, #d8b4fe, #a855f7 50%, #6d28d9);
  --thx-edge: rgba(168, 85, 247, 0.58);
  --thx-edge-hover: rgba(168, 85, 247, 0.92);
  --thx-tint: rgba(168, 85, 247, 0.1);
  --thx-tint-img: radial-gradient(
    circle at 100% 0,
    rgba(216, 180, 254, 0.26),
    transparent 62%
  );
  --thx-glow: rgba(168, 85, 247, 0.5);
  --thx-medal-bg: radial-gradient(circle at 50% 26%, #e9d5ff, #a855f7 44%, #5b21b6);
  --thx-medal-ring: rgba(168, 85, 247, 0.6);
  --thx-ring-w: 2.2px;
  --thx-ring-o: 1;
  --thx-ring-anim: thx-rot 4.4s linear infinite;
  --thx-ring-img: conic-gradient(
    from var(--thx-ang),
    rgba(168, 85, 247, 0) 0deg,
    #a855f7 45deg,
    #f5d0fe 95deg,
    #6d28d9 155deg,
    #a855f7 205deg,
    rgba(168, 85, 247, 0) 266deg,
    rgba(168, 85, 247, 0) 360deg
  );
  --thx-frame2-w: 1px;
  --thx-frame2: rgba(168, 85, 247, 0.3);
  --thx-pat: repeating-linear-gradient(-45deg, rgba(168, 85, 247, 0.09) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(168, 85, 247, 0.06) 0 1px, transparent 1px 22px);
  --thx-pat-o: 1;
  --thx-sheen: rgba(233, 213, 255, 0.3);
  --thx-sheen-o: 1;
  --thx-sheen-anim: thx-sheen 4s ease-in-out infinite;
  --thx-corner-img: radial-gradient(circle, #f5d0fe 0 3.4px, transparent 4.1px),
    radial-gradient(circle, #f5d0fe 0 3.4px, transparent 4.1px),
    radial-gradient(circle, #f5d0fe 0 3.4px, transparent 4.1px),
    radial-gradient(circle, #f5d0fe 0 3.4px, transparent 4.1px);
  --thx-corner-pos: 10px 10px, calc(100% - 20px) 10px, 10px calc(100% - 20px),
    calc(100% - 20px) calc(100% - 20px);
  --thx-corner-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px;
}

/* --- Lv6 专精 · 炫彩：彩虹环 + 色相流转 + 星点漂移 + 全息底 --- */
.thx-lv-6 {
  --thx-c: linear-gradient(135deg, #ff5d5d, #ffb347, #ffe66d, #4ade80, #38bdf8, #a78bfa, #ff5dd0);
  --thx-bar-w: 5px;
  --thx-bar-c: linear-gradient(
    180deg,
    #ff5d5d,
    #ffb347,
    #ffe66d,
    #4ade80,
    #38bdf8,
    #a78bfa,
    #ff5dd0
  );
  --thx-edge: rgba(255, 93, 208, 0.5);
  --thx-edge-hover: rgba(255, 179, 71, 0.85);
  --thx-tint: rgba(167, 139, 250, 0.07);
  --thx-tint-img: linear-gradient(
      135deg,
      rgba(255, 93, 93, 0.09),
      rgba(255, 179, 71, 0.08),
      rgba(74, 222, 128, 0.07),
      rgba(56, 189, 248, 0.08),
      rgba(167, 139, 250, 0.1)
    ),
    radial-gradient(circle at 100% 0, rgba(255, 93, 208, 0.14), transparent 58%);
  --thx-glow: rgba(255, 93, 208, 0.5);
  --thx-medal-bg: conic-gradient(
    from 210deg,
    #ff5d5d,
    #ffb347,
    #ffe66d,
    #4ade80,
    #38bdf8,
    #a78bfa,
    #ff5dd0,
    #ff5d5d
  );
  --thx-medal-ring: rgba(255, 93, 208, 0.6);
  --thx-ring-img: conic-gradient(
    from var(--thx-ang),
    #ff5d5d,
    #ffb347,
    #ffe66d,
    #4ade80,
    #38bdf8,
    #a78bfa,
    #ff5dd0,
    #ff5d5d
  );
  --thx-ring-o: 1;
  --thx-ring-anim: thx-rot 3.4s linear infinite;
  --thx-frame2-w: 1px;
  --thx-frame2: rgba(255, 179, 71, 0.28);
  --thx-pat: radial-gradient(circle, rgba(124, 58, 237, 0.42) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(56, 189, 248, 0.38) 0 1px, transparent 1.6px);
  --thx-pat-size: 46px 46px, 71px 71px;
  --thx-pat-pos: 0 0, 12px 20px;
  --thx-pat-o: 0.5;
  --thx-pat-anim: thx-drift 11s linear infinite;
  --thx-sheen: rgba(255, 255, 255, 0.34);
  --thx-sheen-o: 1;
  --thx-sheen-anim: thx-sheen 3.2s ease-in-out infinite;
  --thx-corner-img: radial-gradient(circle, #ff5dd0 0 2.6px, transparent 3.2px),
    radial-gradient(circle, #ffb347 0 2.6px, transparent 3.2px),
    radial-gradient(circle, #38bdf8 0 2.6px, transparent 3.2px),
    radial-gradient(circle, #4ade80 0 2.6px, transparent 3.2px);
  --thx-corner-pos: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px);
  --thx-corner-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px;
}

/* --- 只有这几条才需要「元素级别」的规则，所以写成复合选择器 --- */
.thx-card.thx-lv-5 {
  animation: thx-pulse-5 3.6s ease-in-out infinite;
}
.thx-card.thx-lv-6 {
  animation: thx-pulse-6 3s ease-in-out infinite;
}
.thx-card.thx-lv-6 .thx-deco::before {
  animation: thx-rot 3.4s linear infinite, thx-hue 7s linear infinite;
}
.thx-card.thx-lv-6 .thx-medal {
  animation: thx-hue 6s linear infinite;
}

/* 刻度条颜色跟随等级（低档偏淡，高档实心发光） */
.thx-lv-1 .thx-bars i.thx-on {
  background: rgba(52, 199, 123, 0.85);
}
.thx-lv-2 .thx-bars i.thx-on {
  background: #3b82f6;
}
.thx-lv-3 .thx-bars i.thx-on {
  background: #f59e0b;
}
.thx-lv-4 .thx-bars i.thx-on {
  background: #ef4444;
  box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
}
.thx-lv-5 .thx-bars i.thx-on {
  background: #a855f7;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.6);
}
.thx-lv-6 .thx-bars i.thx-on {
  background: linear-gradient(90deg, #ff5d5d, #ffb347, #ffe66d, #4ade80, #38bdf8, #a78bfa);
  box-shadow: 0 0 7px rgba(167, 139, 250, 0.65);
}

/* ==========================================================
   卡片内容
   ========================================================== */
.thx-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.thx-name {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.4;
}
.thx-one {
  font-size: 13px;
  line-height: 1.65;
  opacity: 0.78;
}
.thx-now {
  font-size: 12.5px;
  line-height: 1.65;
  opacity: 0.58;
  margin-top: 4px;
  padding-left: 12px;
  position: relative;
}
.thx-now::before {
  content: "▸";
  position: absolute;
  left: 0;
  opacity: 0.75;
}

/* ---- 状态徽章 ---- */
.thx-badge {
  flex: none;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.thx-b-ing {
  color: #3d9fb8;
  background: rgba(67, 166, 198, 0.13);
  border-color: rgba(67, 166, 198, 0.33);
}
.thx-b-doing {
  color: #2f9e73;
  background: rgba(47, 158, 115, 0.13);
  border-color: rgba(47, 158, 115, 0.33);
}
.thx-b-want {
  color: #e0703f;
  background: rgba(255, 127, 80, 0.13);
  border-color: rgba(255, 127, 80, 0.33);
}
.thx-b-long {
  color: #357ef5;
  background: rgba(53, 126, 245, 0.12);
  border-color: rgba(53, 126, 245, 0.3);
}
.thx-b-hold {
  color: #8a8a8a;
  background: rgba(138, 138, 138, 0.13);
  border-color: rgba(138, 138, 138, 0.3);
}
.thx-b-quit {
  color: #777;
  background: rgba(119, 119, 119, 0.1);
  border-color: rgba(119, 119, 119, 0.24);
}

/* ---- 等级勋章 + 刻度 ---- */
.thx-level {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 12px;
}
.thx-medal {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  background-image: var(--thx-medal-bg, linear-gradient(#bbb, #888));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    inset 0 -4px 8px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--thx-medal-ring, transparent),
    0 0 9px var(--thx-glow, transparent);
}
.thx-bars {
  display: inline-flex;
  gap: 3px;
}
.thx-bars i {
  display: block;
  width: 13px;
  height: 5px;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.22);
}
.thx-bars i.thx-on {
  background: var(--anzhiyu-main, #43a6c6);
}
.thx-lvtext {
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.72;
  color: var(--thx-c, inherit);
}

/* ---- 卡片内链接 ---- */
.thx-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}
.thx-link {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 20px;
  text-decoration: none !important;
  color: #3d9fb8 !important;
  background: rgba(67, 166, 198, 0.1);
  border: 1px solid rgba(67, 166, 198, 0.26);
  transition: background 0.2s ease;
}
.thx-link:hover {
  background: rgba(67, 166, 198, 0.22);
}

/* ==========================================================
   招募区
   卡片和 groups 同款（同一张 .thx-card），靠两层标识区分：
   ① 整个区块被虚框圈起来  ② 每张卡右上角一枚「招募」角标
   ========================================================== */
.thx-group-recruit {
  padding: 18px 18px 20px;
  border-radius: 14px;
  background: rgba(67, 166, 198, 0.055);
  border: 1px dashed rgba(67, 166, 198, 0.42);
}
/* 角标：右上角斜切的三角印章，正好贴到卡片的圆角上 */
.thx-flag {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 44px;
  height: 44px;
  padding: 6px 7px 0 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #52c6e4, #2b8aa8);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}
/* 给角标让位，状态徽章不贴最右 */
.thx-card.thx-is-recruit .thx-card-top {
  padding-right: 36px;
}

/* ==========================================================
   搁置 / 退坑区
   窄条列表，不套等级配色（否则会在页面底部抢 groups 的戏）
   ========================================================== */
.thx-shelved-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 12px;
}
.thx-shelved-item {
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(128, 128, 128, 0.07);
  border: 1px solid rgba(128, 128, 128, 0.16);
}
.thx-shelved-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.thx-shelved-name {
  font-weight: 700;
  font-size: 13.5px;
  opacity: 0.85;
}
.thx-shelved-note {
  font-size: 12.5px;
  line-height: 1.65;
  opacity: 0.6;
}

/* 档案件的刻度行：只留「填充格数 + 数字 + 档位名」，灰调、不发光。
   顺便覆盖 .thx-level 的 flex 推底和 12px 上间距（这里容器不是 flex 卡）。 */
.thx-level-muted {
  margin-top: 9px;
  padding-top: 0;
  gap: 8px;
}
.thx-level-muted .thx-bars i.thx-on {
  background: rgba(128, 128, 128, 0.58);
  box-shadow: none;
}
.thx-level-muted .thx-lvtext {
  color: inherit;
  opacity: 0.5;
  font-weight: 500;
}

/* ---- 页脚 / 图例 ---- */
.thx-foot {
  margin-top: 38px;
  padding-top: 18px;
  border-top: 1px dashed rgba(128, 128, 128, 0.3);
}
.thx-legend-head {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 8px;
}
.thx-legend-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.thx-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.8;
}
.thx-legend-chip {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--thx-c, #999);
  box-shadow: 0 0 0 1px var(--thx-edge, transparent), 0 0 7px var(--thx-glow, transparent);
}
.thx-legend-note {
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.7;
  opacity: 0.5;
}
/* 页脚指向「等级样式对照页」的入口 */
.thx-legend-more {
  margin-top: 10px;
  font-size: 12.5px;
}
.thx-legend-more a {
  color: #3d9fb8;
  text-decoration: none;
  border-bottom: 1px dashed rgba(67, 166, 198, 0.5);
  padding-bottom: 1px;
  transition: border-bottom-color 0.2s ease;
}
.thx-legend-more a:hover {
  border-bottom-color: rgba(67, 166, 198, 0.95);
}
.thx-cta {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.9;
}
.thx-contacts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 8px;
}
.thx-contact {
  font-size: 12.5px;
  padding: 4px 11px;
  border-radius: 20px;
  text-decoration: none !important;
  color: #3d9fb8 !important;
  background: rgba(67, 166, 198, 0.1);
  border: 1px solid rgba(67, 166, 198, 0.26);
}
.thx-contact:hover {
  background: rgba(67, 166, 198, 0.22);
}

/* ---- 手机端 ---- */
@media screen and (max-width: 768px) {
  .thx-grid,
  .thx-spotlight,
  .thx-shelved-list {
    grid-template-columns: 1fr;
  }
  .thx-intro {
    padding: 12px 14px;
    font-size: 14px;
  }
  .thx-group-recruit {
    padding: 12px 12px 14px;
  }
  .thx-contacts {
    display: flex;
    margin-left: 0;
    margin-top: 8px;
  }
}

/* ---- 尊重系统的「减少动态效果」 ---- */
@media (prefers-reduced-motion: reduce) {
  .thx-card,
  .thx-card::after,
  .thx-deco,
  .thx-deco::before,
  .thx-deco::after,
  .thx-medal {
    animation: none !important;
    transition: none !important;
  }
  .thx-card::after,
  .thx-deco::after {
    opacity: 0 !important;
  }
}