/* 组件样式：布局和数值以原稿最终生效的规则为准；窄屏规则集中放在文件末尾 */
body {
  margin: 0;
}

.fx * {
  box-sizing: border-box;
}

.fx a {
  color: inherit;
  text-decoration: none;
}

/* 零优先级的重置：按钮组件用单个类名就能覆盖字号、字重和颜色 */
.fx :where(button) {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.fx h1,
.fx h2,
.fx h3,
.fx p,
.fx ol,
.fx ul,
.fx dl,
.fx dd {
  margin: 0;
  padding: 0;
}

.fx li {
  list-style: none;
}

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

.fx mark {
  background: var(--mark);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.fx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}


.fx-logo {
  --ls: 40px;
  --fs: 26px;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--ls);
  height: var(--ls);
  border-radius: 12px;
  background-color: #fff;
  box-shadow: inset 0 0 0 1px var(--logo-ring);
}

.fx-logo svg {
  width: 60%;
  height: 60%;
}

.fav {
  display: block;
  flex: none;
  width: var(--fs);
  height: var(--fs);
  border-radius: 24%;
  background-image: url(../images/favicon-sprite.webp);
  background-repeat: no-repeat;
  background-size: calc(18 * var(--fs)) auto;
  background-position: calc(var(--c) * var(--fs) * -1) calc(var(--r) * var(--fs) * -1);
}

.fx-mark {
  background: var(--hb);
  color: var(--hi);
  font-family: var(--display);
  font-size: calc(var(--ls) * .42);
  font-weight: 800;
}

.fx-shell {
  display: flex;
  gap: 24px;
  padding: 12px 24px 40px 12px;
  align-items: flex-start;
}

.fx-col {
  flex: 1 1 0;
  min-width: 0;
  max-width: 1720px;
}

.fx-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ---------- 侧栏 ---------- */
.fx-side {
  flex: 0 0 196px;
  width: 196px;
  --sn-bg: #0f2236;
  --sn-ink: #e8eef4;
  --sn-mute: #93a6ba;
  --sn-line: rgba(255,255,255,.08);
  --sn-hover: rgba(255,255,255,.06);
  background: var(--sn-bg);
  color: var(--sn-ink);
  border-radius: 22px;
  padding: 14px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 18px 40px -20px rgba(15,34,54,.55);
}

.fx[data-theme="dark"] .fx-side {
  --sn-bg: #08111b;
  --sn-line: rgba(255,255,255,.07);
}

.sn-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 4px;
  color: #e8eef4;
}

.sn-brand>span {
  display: grid;
  gap: 2px;
  line-height: 1.1;
  min-width: 0;
}

.sn-brand__t {
  font-size: 19px;
  line-height: 25px;
  font-weight: 900;
  letter-spacing: .02em;
  background: linear-gradient(90deg,#c4b5fd,#93c5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sn-brand__s {
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .08em;
  color: var(--sn-mute);
  white-space: nowrap;
}

/* 英文品牌名比中文长得多，缩小后才放得进 196 像素的侧栏 */
html[lang="en"] .fx-side .sn-brand__t {
  font-size: 14.5px;
  letter-spacing: 0;
  white-space: nowrap;
}

html[lang="en"] .fx-side .sn-brand__s {
  font-size: 10px;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sn-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 4px;
  border: 0;
  background: transparent;
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--sn-mute) !important;
  opacity: .8;
  text-align: left;
}

.sn-item {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 35px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .02em;
  color: #dbe4ee !important;
  transition: background .15s,color .15s;
}

.sn-item svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: #a5b4fc;
}

.sn-item:hover {
  background: var(--sn-hover);
  color: #fff !important;
}

.sn-item__t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sn-item.is-cur {
  background: var(--grad);
  color: #fff !important;
  font-weight: 500;
  box-shadow: 0 8px 20px -10px rgba(99,102,241,.8);
}

.sn-item.is-cur svg {
  color: #fff;
}

.sn-item--quick svg {
  color: #c4b5fd;
}

.sn-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--sn-line);
}

.sn-foot a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sn-mute) !important;
  background: var(--sn-hover);
  white-space: nowrap;
  overflow: hidden;
}

.sn-foot a:hover {
  color: var(--sn-ink) !important;
  background: rgba(255,255,255,.1);
}

.fx-side :focus-visible,
.fx-mtop :focus-visible {
  outline-color: #c4b5fd;
}

/* 右上角紧凑入口：收藏、工具箱和主题不再占用一整行顶栏 */
.fx-fabs {
  position: fixed;
  top: 14px;
  right: 22px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fx-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter: blur(8px);
  color: var(--ink) !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 16px -10px rgba(15,23,42,.4);
}

.fx-fab:hover {
  border-color: #8b5cf6;
  color: var(--accent) !important;
}

.fx-fab.is-cur {
  border-color: #8b5cf6;
  color: var(--accent) !important;
}

.fx-mtop {
  display: none;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 8px 0 10px;
  background: #0f2236;
  color: #e8eef4;
  width: 100%;
  border-radius: 0 0 18px 18px;
}

.fx-iconbtn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}

.fx-iconbtn--nav {
  color: #e8eef4 !important;
}

.fx-iconbtn--nav:hover {
  background: rgba(255,255,255,.08);
}

/* ---------- 通用面板和标题 ---------- */
.fx-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  scroll-margin-top: 16px;
}

.fx-section-anchor {
  scroll-margin-top: 16px;
}

.fx-h1 {
  font-family: var(--display);
  font-size: 34px;
  line-height: 42px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.fx-h1--sm {
  font-size: 28px;
  line-height: 36px;
  font-weight: 800;
}

.fx-h2 {
  font-family: var(--display);
  font-size: 21px;
  line-height: 28px;
  font-weight: 800;
}

.fx-h2--ic {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fx-h3 {
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  margin: 18px 0 10px !important;
}

.fx-p {
  color: var(--ink);
  margin-bottom: 10px !important;
}

.fx-lead {
  color: var(--muted);
  font-size: 15px;
  line-height: 24px;
}

.fx-meta {
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
}

.fx-phead {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.fx-phead__end {
  margin-left: auto;
}

.fx-pico {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  color: var(--g2);
  background: linear-gradient(180deg,color-mix(in srgb,var(--g1) 16%,#fff),color-mix(in srgb,var(--g2) 12%,#fff));
  border: 1px solid color-mix(in srgb,var(--g2) 20%,#fff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,23,42,.06),
    0 6px 14px -8px color-mix(in srgb,var(--g2) 55%,transparent);
}

.fx-pico::before {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));
  pointer-events: none;
}

.fx-pico svg {
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}

.fx[data-theme="dark"] .fx-pico {
  color: var(--g1);
  background: linear-gradient(180deg,color-mix(in srgb,var(--g1) 20%,#111827),color-mix(in srgb,var(--g2) 14%,#0b1220));
  border-color: color-mix(in srgb,var(--g1) 30%,transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 6px 14px -8px var(--g2);
}

.fx[data-theme="dark"] .fx-pico::before {
  opacity: .08;
}

.fx-pico--lg {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.fx-pico--lg svg {
  width: 22px;
  height: 22px;
}

/* ---------- 首屏 ---------- */
.hx {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hx-main {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 16px;
  padding: 22px 24px 16px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: radial-gradient(60% 120% at 0% 0%,var(--hero-a) 0%,transparent 60%),
    radial-gradient(60% 120% at 100% 0%,var(--hero-b) 0%,transparent 60%),var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.hx-left {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  grid-template-areas: "eb se" "ti se" "sub se" "hot se";
  column-gap: 40px;
  row-gap: 10px;
  align-items: center;
  min-width: 0;
}

.hx-eyebrow {
  grid-area: eb;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px;
  color: var(--muted);
}

.hx-eyebrow i {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.hx-title {
  grid-area: ti;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--display);
  font-size: 34px;
  line-height: 42px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.hx-title>span {
  min-width: 0;
}

.hx-title em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hx-tlogo {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  box-shadow: 0 12px 26px -12px rgba(99,102,241,.7);
  animation: hxbob 4s ease-in-out infinite;
}

@keyframes hxbob {
  0%,100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.hx-sub {
  grid-area: sub;
  max-width: 36em;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

.hx-hot {
  grid-area: hot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.fx-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  line-height: 20px;
  color: var(--muted);
  transition: border-color .15s,background .15s,color .15s;
}

.fx-chip:hover {
  border-color: #a78bfa;
  background: var(--accent-tint);
  color: var(--accent);
}

.fx-search {
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.fx-search:focus-within {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139,92,246,.15),var(--shadow-lg);
}

.hx-left .fx-search {
  grid-area: se;
  align-self: center;
  justify-self: stretch;
}

.fx-engines {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.fx-engine {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  padding: 4px 10px;
  min-height: 28px;
  white-space: nowrap;
  border-radius: 10px 10px 0 0;
}

.fx-engine:hover {
  color: var(--ink);
}

.fx-engine[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 700;
}

.fx-engine[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}

.fx-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 8px 0 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.fx-field svg {
  flex: none;
}

.fx-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: 0;
}

/* 焦点态画在整个搜索框外圈，输入框自己不再画一圈 */
.fx .fx-field input:focus-visible {
  outline: 0;
}

.fx-field input::placeholder {
  color: var(--muted);
}

.fx-kbd {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  margin-right: 8px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 7px;
  background: var(--surface-2);
  font: 600 12px/1 var(--sans);
  color: var(--muted);
}

.fx-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: 11px;
  background: var(--grad);
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(99,102,241,.9);
  transition: filter .15s;
}

.fx-go:hover {
  filter: brightness(1.08);
}

.fx-go--lg {
  height: 46px;
  padding: 0 26px;
  border-radius: 14px;
  background: var(--brand);
  color: var(--on-brand) !important;
  box-shadow: none;
}

/* 本月推荐：横向滚动条，鼠标悬停和键盘聚焦时暂停 */
.hx-right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  min-width: 0;
}

.hx-right__head {
  flex: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 96px;
  padding: 0 14px;
  border-radius: 12px;
  background: linear-gradient(135deg,#7c5cf0,#3b82f6);
}

.hx-right__head b {
  font-size: 13px;
  line-height: 18px;
  color: #fff;
  white-space: nowrap;
}

.hx-right__head a {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}

.hx-right__head a:hover {
  color: #fff;
}

.hx-list {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 40px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}

.hx-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 8px;
  width: max-content;
  animation: hxmarq 60s linear infinite;
}

.hx-list:hover .hx-track,
.hx-list:focus-within .hx-track {
  animation-play-state: paused;
}

@keyframes hxmarq {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.hx-li {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s;
}

.hx-li:hover {
  background: var(--accent-tint);
}

.hx-li .fx-logo {
  --ls: 30px;
  --fs: 19px;
  border-radius: 50%;
}

/* 两行快捷条 */
.hx-strip {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.hx-strip__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  min-width: 0;
}

.hx-strip__row+.hx-strip__row {
  border-top: 1px solid var(--line);
}

.hx-lab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.hx-lab--btn {
  padding: 6px 4px;
  border-radius: 8px;
  color: var(--accent) !important;
}

.hx-lab--btn:hover {
  background: var(--accent-tint);
}

.hx-scroll {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.hx-scroll--tz {
  flex: 0 0 auto;
}

.hx-sep {
  flex: none;
  width: 1px;
  height: 22px;
  background: var(--line);
}

.hx-fest {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg,var(--accent-tint),color-mix(in srgb,#3b82f6 12%,var(--surface)));
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.hx-fest[hidden] {
  display: none;
}

.hx-fest b {
  margin-left: 4px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
}

.hx-fest:hover {
  filter: brightness(.97);
}

.hx-tzmore {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 4px 10px 4px 12px;
  border: 1px dashed var(--accent-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent) !important;
  white-space: nowrap;
}

.hx-tzmore:hover {
  background: var(--accent-tint);
  border-style: solid;
}

.hx-hlbtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-left: auto;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(90deg,#d9381e,#f59e0b);
  color: #fff !important;
  font: 600 13px/1 var(--sans);
  white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(217,56,30,.8);
}

.hx-hlbtn:hover {
  filter: brightness(1.06);
}

.hx-steps {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.hx-steps li {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hx-steps li+li::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,#c4b5fd,#93c5fd);
}

.hx-steps a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s;
}

.hx-steps a:hover {
  background: var(--accent-tint);
  color: var(--accent);
}

.hx-steps i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg,#7c5cf0,#3b82f6);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.hx-usdt {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-left: auto;
  padding: 0 12px 0 6px;
  border: 1px solid var(--usdt-line);
  border-radius: 999px;
  background: var(--usdt-bg);
  color: var(--usdt-ink) !important;
  font: 600 13px/1 var(--sans);
  white-space: nowrap;
}

.hx-usdt:hover {
  border-color: #26a17b;
}

.hx-usdt__ic {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #26a17b;
}

/* ---------- 四格推广横幅 ---------- */
.ad-row {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.ad-slot {
  position: relative;
  display: block;
  aspect-ratio: 890/208;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .18s,box-shadow .18s;
}

.ad-slot:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(60,40,140,.5);
}

.ad-tag {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(0,0,0,.25);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: .06em;
}

.ad-t {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  color: #fff !important;
  isolation: isolate;
}

.ad-t::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 140% at 100% 0,rgba(255,255,255,.28),transparent 55%);
}

.ad-t--ins {
  background: linear-gradient(120deg,#feda75 -10%,#fa7e1e 15%,#d62976 45%,#962fbf 75%,#4f5bd5 105%);
}

.ad-t--ws {
  background: linear-gradient(120deg,#128c7e,#25d366);
}

.ad-t--tg {
  background: linear-gradient(120deg,#1c6fd1,#2aabee);
}

.ad-t__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.ad-t__ic svg {
  width: 28px;
  height: 28px;
}

.ad-t__b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ad-t__b b {
  font-family: var(--display);
  font-size: 21px;
  line-height: 26px;
  font-weight: 800;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-t__b small {
  font-size: 12px;
  line-height: 17px;
  opacity: .92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-t__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 30px;
  margin-bottom: 10px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.ad-t--ins .ad-t__go {
  color: #c13584;
}

.ad-t--ws .ad-t__go {
  color: #128c7e;
}

.ad-t--tg .ad-t__go {
  color: #1c6fd1;
}

.ad-slot--empty {
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--accent-line);
  background: repeating-linear-gradient(135deg,rgba(124,92,240,.05) 0 10px,transparent 10px 20px),
    linear-gradient(120deg,var(--accent-tint),color-mix(in srgb,#3b82f6 8%,var(--surface)));
}

.ad-slot--empty:hover {
  border-style: solid;
}

.ad-slot--empty .ad-tag {
  background: rgba(109,79,224,.14);
  color: var(--accent);
}

.ad-e {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 0 26px;
  text-align: center;
}

.ad-e b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  color: var(--accent);
}

.ad-e i {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.ad-e small {
  max-width: 100%;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 合作页沿用的小号品牌图标和推广标识 */
.fx-adtag {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--muted);
}

.fx-promo__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
}

.fx-promo__ic.is-ins {
  background: linear-gradient(120deg,#c2410c,#be185d 45%,#7e22ce);
}

.fx-promo__ic.is-ws {
  background: linear-gradient(120deg,#0b6e63,#0f8a5a);
}

.fx-promo__ic.is-tg {
  background: linear-gradient(120deg,#1c5fc4,#0a78b5);
}

/* ---------- 出海必备 ---------- */
.mx {
  padding: 18px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 16px;
}

.mx-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}

.mx-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 21px;
  line-height: 28px;
  font-weight: 800;
}

.mx-head>span {
  font-size: 13px;
  color: var(--muted);
}

.mx-flame {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(135deg,#ff8a4c,#f43f5e);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(244,63,94,.8);
}

.mx-chips {
  display: grid;
  grid-template-columns: repeat(8,minmax(0,1fr));
  gap: 8px;
}

.mx-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  min-width: 0;
  transition: border-color .15s,box-shadow .15s,transform .15s;
}

.mx-chip:hover {
  border-color: var(--accent-line);
  box-shadow: 0 10px 22px -14px rgba(99,102,241,.55);
  transform: translateY(-2px);
}

.mx-chip .fx-logo {
  --ls: 32px;
  --fs: 21px;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.mx-chip b {
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- TG 社群 ---------- */
.tgz.fx-panel {
  padding: 20px 22px;
  background: linear-gradient(180deg,var(--tg-top),var(--surface) 60%);
  border-color: var(--tg-line);
}

.tgz-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.tgz-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #229ed9;
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(34,158,217,.9);
}

.tgz-logo svg {
  width: 21px;
  height: 21px;
}

.tgz-head__t {
  min-width: 0;
}

.tgz-head h2 {
  font-family: var(--display);
  font-size: 19px;
  line-height: 24px;
  font-weight: 800;
}

.tgz-head p {
  margin-top: 1px;
  font-size: 12.5px;
  line-height: 20px;
  color: var(--muted);
}

.tgz-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin-left: auto;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(90deg,#229ed9,#7c5cf0);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 22px -10px rgba(34,158,217,.75);
  transition: transform .15s,filter .15s;
}

.tgz-more:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.tgz-grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 10px;
}

.tgz-item {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  grid-template-rows: auto auto;
  gap: 8px 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  min-width: 0;
  transition: border-color .15s,box-shadow .15s;
}

.tgz-item:hover {
  border-color: #93c5fd;
  box-shadow: 0 12px 26px -16px rgba(34,158,217,.6);
}

.tgz-item.is-own {
  border-color: var(--accent-line);
  background: linear-gradient(135deg,var(--own-a),var(--own-b));
}

.tgz-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 6px 14px -8px rgba(124,92,240,.7);
}

.tgz-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.tgz-name b {
  max-width: 100%;
  font-size: 14.5px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tgz-type {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tg-type-bg);
  color: var(--tg-type-ink);
  font-size: 10px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.tgz-item.is-own .tgz-type {
  background: var(--grad);
  color: #fff;
}

.tgz-join {
  grid-column: 1/-1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #1480bb;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  transition: filter .15s;
}

.tgz-join:hover {
  filter: brightness(1.08);
}

/* ---------- 分类 Tab：整条浅底轨道，选中项白底轻阴影 ---------- */
.fx-tabs {
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.fx-tab {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-height: 30px;
  padding: 5px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted) !important;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}

.fx-tab small {
  font-size: 11px;
  opacity: .85;
}

.fx-tab:hover {
  color: var(--ink) !important;
}

.fx-tab[aria-current="true"],
.fx-tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink) !important;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ---------- 工具卡片 ---------- */
.fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
  gap: 10px;
}

.fx-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  min-width: 0;
  transition: border-color .15s,box-shadow .15s,transform .15s;
}

.fx-card:hover {
  border-color: var(--accent-line);
  box-shadow: 0 12px 26px -16px rgba(99,102,241,.55);
  transform: translateY(-2px);
}

.fx-card__body {
  min-width: 0;
}

.fx-card__top {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.fx-card__name {
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 主链接铺满整张卡，收藏和官网按钮是同级元素，不嵌进链接里 */
.fx-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

/* 名称所在的 h3 会裁切内容，焦点环画在铺满整卡的那一层上 */
.fx .fx-card__name a:focus-visible {
  outline: 0;
}

.fx-card__name a:focus-visible::after {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.fx-card__desc {
  margin-top: 2px !important;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-card__host {
  display: block;
  font-size: 11px;
  line-height: 16px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-card__acts {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  gap: 2px;
}

/* 已收藏时星标常显，给标题行留出位置，不压住名称和徽标 */
.fx-card:has(.fx-star[aria-pressed="true"]) .fx-card__top {
  padding-right: 22px;
}

.fx-star,
.fx-card__go {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted) !important;
  opacity: 0;
  transition: opacity .15s,color .15s;
}

.fx-card:hover .fx-star,
.fx-card:hover .fx-card__go,
.fx-card:focus-within .fx-star,
.fx-card:focus-within .fx-card__go,
.fx-star[aria-pressed="true"] {
  opacity: 1;
}

.fx-star:hover,
.fx-card__go:hover {
  color: var(--accent) !important;
}

.fx-star[aria-pressed="true"] {
  color: var(--signal) !important;
}

.fx-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.fx-card .fx-badge {
  height: 16px;
  padding: 0 6px;
  font-size: 10px;
}

.fx-badge.is-hot {
  background: var(--signal);
  color: var(--on-signal);
}

.fx-badge.is-risk {
  background: var(--warn-tint);
  color: var(--warn);
}

.fx-badge.is-free {
  background: var(--brand-tint);
  color: var(--brand-ink);
}

.fx-badge.is-new {
  background: var(--lime);
  color: var(--lime-ink);
}

.fx-badge.is-vpn {
  background: var(--surface-3);
  color: var(--muted);
}

.fx-tagc {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px;
  line-height: 22px;
  color: var(--muted);
}

.fx-card .fx-tagc {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-tagc.is-link::before {
  content: "#";
  margin-right: 2px;
  opacity: .45;
}

.fx-tagc.is-link:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-ink);
}

.fx-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-ink) !important;
  white-space: nowrap;
}

.fx-link:hover {
  text-decoration: underline !important;
}

.fx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink) !important;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .15s,background .15s;
}

.fx-btn:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.fx-btn[aria-pressed="true"] {
  border-color: transparent;
  background: var(--warn-tint);
  color: var(--warn) !important;
}

.fx-btn--sm {
  height: 34px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}

/* 展开和收起：有 JS 时就地切换，没有 JS 时进入分类页 */
.fx-more {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 40px;
  margin: 16px auto 0;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted) !important;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .15s,background .15s,color .15s;
}

.fx-more:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-ink) !important;
}

.fx-more svg {
  transition: transform .2s;
}

.fx-clip.is-open .fx-more svg {
  transform: rotate(180deg);
}

.fx-morerow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* 首页每个模块默认只露三行：列数由容器宽度决定，所以用容器查询算截断位置，HTML 只生成一份 */
.fx-clip {
  container-type: inline-size;
}

.js .fx-clip:not(.is-open) .fx-grid > :nth-child(n + 7) {
  display: none;
}

@container (min-width: 650px) {
  .js .fx-clip:not(.is-open) .fx-grid > :nth-child(-n + 9) {
    display: grid;
  }

  .fx-grid:not(:has(> :nth-child(10))) + .fx-more {
    display: none;
  }
}

@container (min-width: 870px) {
  .js .fx-clip:not(.is-open) .fx-grid > :nth-child(-n + 12) {
    display: grid;
  }

  .fx-grid:not(:has(> :nth-child(13))) + .fx-more {
    display: none;
  }
}

@container (min-width: 1090px) {
  .js .fx-clip:not(.is-open) .fx-grid > :nth-child(-n + 15) {
    display: grid;
  }

  .fx-grid:not(:has(> :nth-child(16))) + .fx-more {
    display: none;
  }
}

@container (min-width: 1310px) {
  .js .fx-clip:not(.is-open) .fx-grid > :nth-child(-n + 18) {
    display: grid;
  }

  .fx-grid:not(:has(> :nth-child(19))) + .fx-more {
    display: none;
  }
}

@container (min-width: 1530px) {
  .js .fx-clip:not(.is-open) .fx-grid > :nth-child(-n + 21) {
    display: grid;
  }

  .fx-grid:not(:has(> :nth-child(22))) + .fx-more {
    display: none;
  }
}

.fx-note {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.fx-note p {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-2);
}

.fx-note b {
  margin-right: 8px;
}

.fx-note__warn {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--warn-tint) !important;
  color: var(--warn);
}

.fx-note__warn svg {
  flex: none;
  margin-top: 3px;
}

.fx .fx-note__warn--box {
  padding: 10px 14px;
  border-radius: 12px;
}

/* ---------- 新手路线和任务入口 ---------- */
.fx-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(190px,100%),1fr));
  gap: 10px;
}

.fx-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 14px 4px;
  border-radius: 14px;
  background: var(--surface-2);
  scroll-margin-top: 16px;
}

.fx-step b {
  font-size: 15px;
  line-height: 22px;
}

.fx-step p {
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}

.fx-step__n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.fx-tasks {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(190px,100%),1fr));
  gap: 10px;
}

.fx-task {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted) !important;
  transition: border-color .15s,background .15s;
}

.fx-task:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.fx-task__t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
}

.fx-task__t b {
  font-size: 14px;
  line-height: 20px;
}

.fx-task__t small {
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-collab {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.fx-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  padding: 4px 8px;
}

/* ---------- 客服浮层：原生 details，无 JS 也能展开 ---------- */
.cs {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 21;
}

.cs-mini {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-left: auto;
  padding: 4px;
  border-radius: 50%;
  background: #7a4fe0;
  box-shadow: 0 12px 28px -10px rgba(122,79,224,.7);
}

.cs-mini img {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.cs-panel {
  position: absolute;
  right: 0;
  bottom: 62px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 164px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 18px 40px -16px rgba(10,30,60,.35);
}

.cs-title {
  align-self: center;
  padding: 3px 14px;
  border-radius: 999px;
  background: #7a4fe0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}

.cs-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  background: #0a73b8;
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s;
}

.cs-btn:hover {
  background: #085f99;
}

/* ---------- 面包屑 ---------- */
.fx-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}

.fx-crumbs a:hover {
  color: var(--brand);
}

.fx-crumb-cur {
  color: var(--ink);
  font-weight: 600;
}

.fx-crumbrow {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  min-height: 34px;
  padding-right: 190px;
}

/* ---------- 详情页 ---------- */
.fx-dhead {
  display: grid;
  grid-template-columns: 200px minmax(0,1fr);
  gap: 32px;
  align-items: start;
}

.fx-dlogo-wrap {
  display: grid;
  place-items: center;
  width: 200px;
  height: 200px;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--g2) 26%,transparent) 0%,transparent 72%),
    var(--surface-2);
}

.fx-dlogo-wrap .fx-logo,
.fx-cv-logo .fx-logo {
  --ls: 128px;
  --fs: 84px;
  border-radius: 36px;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.4),inset 0 0 0 1px var(--logo-ring);
}

.fx-dhead__b {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fx-dhead__t {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fx-dhead__t h1 {
  font-family: var(--display);
  font-size: 32px;
  line-height: 40px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.fx-drows {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 10px 18px;
  font-size: 14px;
  line-height: 22px;
}

.fx-drows dt {
  color: var(--muted);
  white-space: nowrap;
}

.fx-drows dd {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.fx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fx-url {
  color: var(--brand-ink) !important;
  overflow-wrap: anywhere;
}

a.fx-url:hover {
  text-decoration: underline;
}

.fx-url--sel {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2);
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 13px;
  line-height: 20px;
  user-select: all;
}

.fx-cover {
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg,color-mix(in srgb,var(--g1) 30%,#fff),color-mix(in srgb,var(--g2) 22%,#fff));
  box-shadow: 0 18px 40px -26px color-mix(in srgb,var(--g2) 70%,transparent);
}

.fx[data-theme="dark"] .fx-cover {
  background: linear-gradient(135deg,color-mix(in srgb,var(--g2) 35%,#0b1220),#0b1220);
}

.fx-cv-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.7);
}

.fx[data-theme="dark"] .fx-cv-bar {
  background: rgba(255,255,255,.06);
}

.fx-cv-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}

.fx-cv-bar i:nth-child(2) {
  background: #febc2e;
}

.fx-cv-bar i:nth-child(3) {
  background: #28c840;
}

.fx-cv-url {
  flex: 1;
  display: block;
  max-width: 420px;
  height: 24px;
  margin-left: 12px;
  padding: 0 12px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-cv-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 180px;
  padding: 30px 32px;
  overflow: hidden;
}

.fx-cv-body::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle,color-mix(in srgb,var(--g1) 45%,transparent),transparent 70%);
}

.fx-cv-logo {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 14px;
  border-radius: 40px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 20px 40px -24px rgba(15,23,42,.45);
}

.fx-cv-txt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fx-cv-cat {
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb,var(--g2) 80%,#000);
}

.fx-cv-txt b {
  font-family: var(--display);
  font-size: 26px;
  line-height: 32px;
  font-weight: 800;
  color: #0f172a;
}

.fx-cv-txt p {
  max-width: 520px;
  font-size: 14px;
  line-height: 22px;
  color: #334155;
}

.fx[data-theme="dark"] .fx-cv-txt b {
  color: #fff;
}

.fx[data-theme="dark"] .fx-cv-txt p {
  color: #cbd5e1;
}

.fx[data-theme="dark"] .fx-cv-cat {
  color: var(--g1);
}

.fx-cv-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin-top: 6px;
  padding: 0 14px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .15s;
}

.fx-cv-btn:hover {
  background: #1e293b;
}

.fx-article {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}

.fx-ab {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.fx-ab h3 {
  margin-bottom: 6px !important;
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
}

.fx-ab p {
  font-size: 13.5px;
  line-height: 22px;
  color: var(--muted);
}

.fx-abi {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb,var(--accent) 30%,var(--surface));
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent);
}

.fx-ab--warn .fx-abi {
  border-color: color-mix(in srgb,var(--warn) 30%,var(--surface));
  background: var(--warn-tint);
  color: var(--warn);
}

.fx .fx-steps3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}

.fx-steps3 li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 14px 14px 56px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
}

.fx-steps3 i {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg,#7c5cf0,#3b82f6);
  color: #fff;
  font-style: normal;
  font-weight: 800;
}

.fx-steps3 b {
  font-size: 13.5px;
}

/* 这一行让用户核对域名，宁可换行也不能省略 */
.fx-steps3 small {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.fx-sub-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 26px 0 12px !important;
  font-size: 16px;
  font-weight: 800;
}

.fx-sub-h::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(180deg,#7c5cf0,#3b82f6);
}

.fx-facts {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

.fx-fact {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.fx-fact__i {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--accent-tint);
  color: var(--accent);
}

.fx-fact__b {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fx-fact__b small {
  font-size: 11.5px;
  color: var(--muted);
}

.fx-fact__b b {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fx-faq__i {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.fx-faq__i summary {
  position: relative;
  padding: 13px 44px 13px 16px;
  font-size: 14px;
  font-weight: 600;
}

.fx-faq__i summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 16px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent);
  font-weight: 700;
  transform: translateY(-50%);
}

.fx-faq__i[open] summary::after {
  content: "−";
}

.fx-faq__i[open] summary {
  border-bottom: 1px solid var(--line);
}

.fx-faq__i p {
  padding: 12px 16px 14px;
  font-size: 13.5px;
  line-height: 22px;
  color: var(--muted);
}

.fx-dacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.fx-dact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted) !important;
  font-size: 13px;
  transition: border-color .15s,color .15s;
}

.fx-dact:hover {
  border-color: #8b5cf6;
  color: var(--accent) !important;
}

.fx-simgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
  gap: 12px;
}

.fx-sim {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color .15s,box-shadow .15s,transform .15s;
}

.fx-sim:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.fx-sim .fx-logo {
  --ls: 38px;
  --fs: 24px;
  border-radius: 11px;
}

.fx-sim__b {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fx-sim__b b {
  font-size: 15px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-sim__d {
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-sim__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
}

.fx-sim:hover .fx-sim__go {
  border-color: var(--brand);
  color: var(--brand);
}

.fx-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fx-pager a {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.fx-pager a:hover {
  border-color: var(--brand);
}

.fx-pager a:last-child {
  text-align: right;
}

.fx-pager small {
  font-size: 12px;
  color: var(--muted);
}

.fx-pager b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-toolgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap: 20px;
  align-items: start;
}

.fx-toolgrid__wide {
  grid-column: 1/-1;
}

.fx-clocks {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(200px,100%),1fr));
  gap: 8px;
}

.fx-clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
}

.fx-clock span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fx-clock small {
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  white-space: nowrap;
}

.fx-clock__t {
  align-items: flex-end;
  flex: none;
}

.fx-clock__t b {
  font-size: 18px;
  line-height: 24px;
}

.fx-clock.is-on {
  background: var(--ok-tint);
}

.fx-fests {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fx-fest {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.fx-fest:first-child {
  border-top: 0;
}

.fx-fest__d {
  flex: none;
  width: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.fx-fest__t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.fx-fest__t small {
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
}

.fx-fest__l {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-ink);
}

.fx-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.fx-ta {
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  font: inherit;
  color: var(--ink);
  resize: vertical;
}

.fx-ta::placeholder {
  color: var(--muted);
}

.fx-phstat {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 10px 0;
  font-size: 13px;
  color: var(--muted);
}

.fx-phstat b {
  margin-right: 4px;
  font-size: 16px;
  color: var(--ink);
}

.fx-alm {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-2);
}

.fx-alm__d {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fx-alm__d b {
  font-size: 44px;
  line-height: 48px;
  font-weight: 800;
}

.fx-alm__d span,
.fx-alm__t small {
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
}

.fx-alm__t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fx-alm__t b {
  font-size: 16px;
  line-height: 24px;
}

.fx-yj {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.fx-yj p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.fx-yj i {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
}

.fx-yj .is-yi {
  background: var(--ok-tint);
  color: var(--ok);
}

.fx-yj .is-ji {
  background: var(--warn-tint);
  color: var(--warn);
}

.fx-offline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2);
}

.fx-offline__t {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
}

.fx-offline__t span {
  display: flex;
  flex-direction: column;
  color: var(--ink);
}

.fx-offline__t small {
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
}

.fx-state__b {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.fx-state__t {
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  max-width: 340px;
}

.fx-toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  background: #141c2b;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.fx[data-theme="dark"] .fx-toast {
  background: #e8edf5;
  color: #141c2b;
}

/* ---------- 站点专属：画布表达不了的部分 ---------- */
html.fx {
  min-height: 100%;
  background: var(--canvas);
}

.fx [hidden] {
  display: none !important;
}

.fx-main:focus,
.fx-main:focus-visible {
  outline: 0;
}

.fx-section-anchor {
  scroll-margin-top: 16px;
}

/* 桌面侧栏吸顶，列表内部滚动，底部入口常驻 */

@media (min-width: 961px) {
  .fx-side {
    position: sticky;
    top: 12px;
    height: calc(100vh - 24px);
  }

  .fx-side .sn-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 28px),transparent);
    mask-image: linear-gradient(#000 calc(100% - 28px),transparent);
    padding-bottom: 20px;
  }

  .fx-side .sn-list::-webkit-scrollbar {
    display: none;
  }
}

.fx-mtop {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* 英文品牌名较长，窄屏下省略，不能把操作按钮挤出屏幕 */
.fx-mtop .sn-brand {
  flex: 1;
  min-width: 0;
}

.fx-mtop .sn-brand > span {
  min-width: 0;
}

.fx-mtop .sn-brand__t {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-mtop > div {
  flex: none;
}

/* 原生弹层 */
.fx-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.fx-dialog[open] {
  display: flex;
  flex-direction: column;
}

.fx-dialog::backdrop {
  background: rgba(8, 17, 27, .55);
}

.fx-dialog__h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 14px 24px;
  border-bottom: 1px solid var(--line);
}

.fx-dialog__b {
  padding: 20px 24px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fx-iconbtn--plain {
  flex: none;
  color: var(--muted) !important;
}

.fx-iconbtn--plain:hover {
  background: var(--surface-2);
  color: var(--ink) !important;
}

/* 页面内提示 */
.fx-toastbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.fx-totop {
  position: fixed;
  right: 26px;
  bottom: 24px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg,#6d8bff,#a66bff);
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 10px 24px -8px rgba(122,79,224,.65);
  transition: transform .15s;
}

.fx-totop:hover {
  transform: translateY(-3px);
}

/* 新手路线的完整步骤，在五步下方整行展开 */
.fx-stepdetail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.fx-stepdetail ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fx-stepdetail li {
  display: flex;
  gap: 10px;
}

.fx-stepdetail i {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.fx-stepdetail__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fx-stepdetail__tools .fx-tagc {
  margin: 0;
}

/* 防骗提醒 */
.fx-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}

.fx-tips li {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  background: var(--surface-2);
}

.fx-tips b {
  font-size: 15px;
  line-height: 22px;
}

.fx-tips span {
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}

/* 广告介绍弹层 */
.fx-feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 10px;
}

.fx-feats li {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
}

.fx-feats small {
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}

.fx-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fx-pills .fx-tagc {
  margin: 0;
}

/* 工具箱 */
.fx-clockgroup + .fx-clockgroup {
  margin-top: 14px;
}

.fx-clockgroup h3 {
  margin-bottom: 8px !important;
  font-size: 14px;
  line-height: 20px;
}

.fx-phopts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  font-size: 13px;
  color: var(--muted);
}

.fx-select {
  min-height: 44px;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.fx-input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.fx-input::placeholder {
  color: var(--muted);
}

.fx-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 10px;
}

.fx-fmtlist {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  margin-top: 10px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.fx-fmtrow {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 56px minmax(0, 1.4fr);
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 20px;
}

.fx-fmtrow:first-child {
  border-top: 0;
}

.fx-fmtrow code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.fx-almgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 8px;
}

.fx-almgrid div {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
}

.fx-almgrid dt {
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
}

.fx-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}

.fx-times li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13px;
}

.fx-times small {
  font-size: 12px;
  color: var(--muted);
}

.fx-times .is-yi {
  background: var(--ok-tint);
  color: var(--ok);
}

.fx-times .is-ji {
  background: var(--warn-tint);
  color: var(--warn);
}

.fx-almnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.fx-rate {
  font-size: 26px;
  line-height: 34px;
  font-weight: 800;
}

.fx-rates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.fx-rates li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13px;
}

.fx-usdtlinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 8px;
}

.fx-usdtlinks a {
  display: flex;
  flex-direction: column;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.fx-usdtlinks small {
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
}

/* 英文标题比中文长，同样的格宽放不下咨询按钮 */
@media (max-width: 1700px) {
  html[lang="en"] .ad-t__go {
    display: none;
  }
}

@media (max-width: 1400px) {
  .mx-chips {
    grid-template-columns: repeat(6,minmax(0,1fr));
  }

  .ad-t__go {
    display: none;
  }

  /* 四列时格子很矮，图标和文字一起缩小才不会被裁 */
  .ad-t {
    gap: 10px;
    padding: 0 12px;
  }

  .ad-t__ic {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .ad-t__ic svg {
    width: 20px;
    height: 20px;
  }

  .ad-t__b b {
    font-size: 17px;
    line-height: 22px;
  }
}

@media (max-width: 1180px) {
  .ad-row {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .ad-t__ic {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .ad-t__ic svg {
    width: 28px;
    height: 28px;
  }

  .ad-t__b b {
    font-size: 21px;
    line-height: 26px;
  }
}

@media (max-width: 1100px) {
  .hx-left {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "eb" "ti" "sub" "se" "hot";
  }

  .mx-chips {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}

@media (max-width: 1080px) {
  .tgz-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

/* 961 像素以上用桌面侧栏，以下换成顶栏加抽屉 */
@media (max-width: 960px) {
  .fx-shell {
    display: block;
    padding: 0;
  }

  .fx-side,
  .fx-fabs {
    display: none;
  }

  .fx-mtop {
    display: flex;
  }

  .fx-col {
    max-width: none;
  }

  .fx-main {
    gap: 12px;
    padding: 12px 10px 28px;
  }

  .fx-panel {
    padding: 18px;
    border-radius: 18px;
    scroll-margin-top: 68px;
  }

  .mx,
  .fx-section-anchor,
  .fx-step {
    scroll-margin-top: 68px;
  }

  .fx-crumbrow {
    padding-right: 0;
  }

  .hx-strip__row:first-child {
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 14px;
  }

  .hx-sep {
    display: none;
  }

  .hx-scroll {
    flex-basis: calc(100% - 90px);
  }
}

@media (max-width: 760px) {
  .hx-main {
    padding: 18px 14px 14px;
  }

  .hx-title {
    gap: 10px;
    font-size: 26px;
    line-height: 34px;
  }

  .hx-tlogo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .hx-right__head {
    display: none;
  }

  .fx-kbd {
    display: none;
  }

  .fx-cv-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 22px;
  }

  .fx-cv-txt b {
    font-size: 21px;
    line-height: 27px;
  }

  .fx-article,
  .fx .fx-steps3 {
    grid-template-columns: minmax(0,1fr);
  }

  .fx-facts {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .fx-h1 {
    font-size: 26px;
    line-height: 34px;
  }

  .fx-h1--sm {
    font-size: 22px;
    line-height: 30px;
  }
}

@media (max-width: 640px) {
  .fx-main {
    padding: 12px 8px 28px;
  }

  .fx-panel,
  .tgz.fx-panel {
    padding: 14px;
  }

  .fx-h2,
  .mx-head h2,
  .tgz-head h2 {
    font-size: 18px;
    line-height: 24px;
  }

  .mx {
    padding: 14px;
  }

  .mx-chips {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .fx-search {
    border-radius: 16px;
  }

  .fx-field {
    height: 54px;
    padding-left: 12px;
  }

  .fx-go {
    padding: 0 14px;
  }

  .fx-engine {
    min-height: 36px;
  }

  .fx-chip {
    min-height: 32px;
  }

  .fx-tab {
    min-height: 36px;
  }

  .hx-strip__row {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding: 0 14px;
  }

  /* 整行一起横向滚动，步骤不能缩进自己的滚动框，否则会被 USDT 按钮压住 */
  .hx-steps {
    flex: none;
    overflow: visible;
  }

  .ad-row {
    gap: 8px;
    padding: 8px;
  }

  /* 窄屏按比例算出的高度放不下图标，改用固定最小高度 */
  .ad-slot {
    aspect-ratio: auto;
    min-height: 58px;
  }

  .ad-t {
    gap: 8px;
    padding: 0 8px;
  }

  .ad-t__ic {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .ad-t__ic svg {
    width: 20px;
    height: 20px;
  }

  .ad-t__b b {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0;
  }

  .ad-tag {
    right: 4px;
    bottom: 3px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 13px;
  }

  .ad-t__b {
    padding-bottom: 8px;
  }

  .ad-e {
    padding: 0 8px 8px;
  }

  .ad-t__b small,
  .ad-e small {
    display: none;
  }

  .ad-e b {
    font-size: 14px;
  }

  .tgz-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }

  .tgz-more {
    position: relative;
    height: 32px;
    margin-left: 0;
    padding: 0 12px;
    font-size: 12px;
  }

  /* 视觉保持紧凑，点击区用透明层扩到 44 像素 */
  .tgz-more::after {
    content: "";
    position: absolute;
    inset: -6px 0;
  }

  .fx-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }

  .fx-card {
    grid-template-columns: 34px minmax(0,1fr);
    gap: 10px;
    padding: 10px;
  }

  .fx-card .fx-logo {
    --ls: 34px;
    --fs: 22px;
    border-radius: 10px;
  }

  .fx-dhead {
    grid-template-columns: minmax(0,1fr);
    gap: 20px;
  }

  .fx-dlogo-wrap {
    width: 100%;
    height: 170px;
  }

  .fx-dlogo-wrap .fx-logo,
  .fx-cv-logo .fx-logo {
    --ls: 104px;
    --fs: 68px;
    border-radius: 30px;
  }

  .fx-actions .fx-btn,
  .fx-actions .fx-go {
    flex: 1 1 140px;
  }

  .fx-collab .fx-btn {
    flex: 1 1 100%;
  }

  .fx-crumb-opt {
    display: none;
  }

  /* 英文按钮文字较长，窄屏允许换行，不撑破页面 */
  .fx-btn {
    max-width: 100%;
    height: auto;
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }

  .fx-foot {
    padding: 4px 0;
  }

  .fx-totop {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }

  .cs {
    right: 12px;
    bottom: 64px;
  }

  .cs-mini {
    width: 44px;
    height: 44px;
    padding: 3px;
  }

  .cs-mini img {
    width: 38px;
    height: 38px;
  }

  .cs-panel {
    bottom: 52px;
  }

}

@media (max-width: 420px) {
  .fx-facts {
    grid-template-columns: minmax(0,1fr);
  }
}

@media (max-width: 380px) {
  .fx-grid {
    grid-template-columns: minmax(0,1fr);
  }
}

/* 触屏没有悬停：收藏常显，官网入口在详情页；视觉保持紧凑，点击区用透明层扩到 44 像素 */
@media (hover: none) {
  .fx-card__go {
    display: none;
  }

  .fx-star {
    position: relative;
    opacity: 1;
    background: transparent;
  }

  .fx-star::before {
    content: "";
    position: absolute;
    inset: -9px;
  }

  .fx-card__top {
    padding-right: 20px;
  }
}

/* ---------- 真实 HTML 页面的补充样式 ---------- */
.sn-item .ci {
  color: #a5b4fc;
}

.sn-item.is-cur .ci {
  color: #fff;
}

html:not(.js) .js-only {
  display: none !important;
}

/* 不用 noscript：样式判断比解析器行为更稳定 */
.js .fx-nojs-only {
  display: none;
}

/* 图标属性集中在样式里，每页有上百个图标，能省下不少体积 */
.i {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.i-f {
  fill: currentColor;
  stroke: none;
}

details > summary {
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] > summary .i-open {
  transform: rotate(180deg);
}

/* 新手路线展开时占满整行，五列里放不下完整步骤 */
.fx-step:has(details[open]) {
  grid-column: 1 / -1;
  box-shadow: inset 0 0 0 2px var(--brand);
}

.fx-step details {
  width: 100%;
}

.fx-step summary {
  width: fit-content;
}

.sn-drawer-only,
.fx-side__close,
.fx-scrim {
  display: none;
}

/* 窄屏：侧栏用 :target 打开成抽屉，真实链接，无 JS 也能用 */
@media (max-width: 960px) {
  .fx-side:target {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    display: flex;
    width: min(320px, 86vw);
    height: 100dvh;
    border-radius: 0;
    overflow-y: auto;
  }

  .fx-side:target .sn-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 6px;
  }

  .fx-side:target .sn-group {
    grid-column: 1/-1;
  }

  .fx-side:target .sn-item {
    min-height: 44px;
    padding: 0 8px;
    gap: 8px;
    font-size: 13.5px;
  }

  .fx-side:target .sn-foot a {
    min-height: 44px;
  }

  .fx-side:target .sn-drawer-only {
    display: flex;
  }

  .fx-side:target .fx-side__close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
  }

  .fx-side:target + .fx-scrim {
    position: fixed;
    inset: 0;
    z-index: 29;
    display: block;
    background: rgba(8, 17, 27, .55);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion:reduce) {
  .fx * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .hx-track {
    position: static;
    animation: none;
  }

  .hx-list {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .fx-card:hover,
  .fx-sim:hover,
  .ad-slot:hover,
  .mx-chip:hover,
  .tgz-more:hover,
  .fx-totop:hover {
    transform: none;
  }
}

/* 无 JS 且系统为深色时，补上依赖 data-theme 的几条规则 */
@media (prefers-color-scheme: dark) {
  html.fx:not([data-theme]) .fx-side {
    --sn-bg: #08111b;
    --sn-line: rgba(255,255,255,.07);
  }

  html.fx:not([data-theme]) .fx-pico {
    color: var(--g1);
    background: linear-gradient(180deg,color-mix(in srgb,var(--g1) 20%,#111827),color-mix(in srgb,var(--g2) 14%,#0b1220));
    border-color: color-mix(in srgb,var(--g1) 30%,transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 6px 14px -8px var(--g2);
  }

  html.fx:not([data-theme]) .fx-pico::before {
    opacity: .08;
  }

  html.fx:not([data-theme]) .fx-cover {
    background: linear-gradient(135deg,color-mix(in srgb,var(--g2) 35%,#0b1220),#0b1220);
  }

  html.fx:not([data-theme]) .fx-cv-bar {
    background: rgba(255,255,255,.06);
  }

  html.fx:not([data-theme]) .fx-cv-txt b {
    color: #fff;
  }

  html.fx:not([data-theme]) .fx-cv-txt p {
    color: #cbd5e1;
  }

  html.fx:not([data-theme]) .fx-cv-cat {
    color: var(--g1);
  }
}