/**
 * FFDYY Hero 搜索 - 前台样式
 * 前缀 .ffdyy-hero，避免与主题样式冲突。
 *
 * ★ 配色全部走 CSS 变量（v1.6.0 起），这里写的只是「兜底默认值」。
 *   真正生效的值由 PHP 按后台选的主题（indigo / delta / cyber …）
 *   或自定义色盘算好后，以内联 style 打在 .hero-section 上。
 *   所以换主题时不需要改这个文件——只要改主题表里的颜色即可。
 */

.hero-section.ffdyy-hero {
  /* —— 主题色（会被内联 style 覆盖）—— */
  --ffh-c1: #667eea;                                  /* 主色：Logo 底 / 按钮渐变起点 */
  --ffh-c2: #764ba2;                                  /* 辅色：按钮渐变终点 */
  --ffh-glow: rgba(102, 126, 234, 0.45);              /* 配图辉光（跟随主色） */
  --ffh-glow-soft: rgba(102, 126, 234, 0.30);         /* 搜索框聚焦光圈 / Logo 投影 */
  --ffh-title-glow: rgba(102, 126, 234, 0.32);        /* 标题文字光晕 */
  --ffh-bg: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); /* 独立深色底 */
  /* 氛围光斑：amb* 是起点色，amb*-0 是同色全透明（渐变终点必须用同色+alpha:0，
     不能写 transparent —— 那是「透明黑」，过渡会发灰） */
  --ffh-amb1: rgba(102, 126, 234, 0.20);
  --ffh-amb1-0: rgba(102, 126, 234, 0);
  --ffh-amb2: rgba(238, 110, 115, 0.13);
  --ffh-amb2-0: rgba(238, 110, 115, 0);

  --ffh-radius: 16px;
  position: relative;
  overflow: hidden;
  padding: 70px 20px 80px;
  background: transparent !important;
  background-image: none !important;
}

/* 说明：下面这些 !important 是刻意加的。
   很多子比站点会在「自定义CSS」里写
     .hero-section{background:transparent!important}
     .hero-section ul>li{background:transparent!important;border:0!important}
   插件规则的选择器权重更高（.hero-section.ffdyy-hero…），
   这样后台「标签外观 / 区块背景」两个开关才真的生效。 */

.hero-section.ffdyy-hero.ffdyy-hero--bg {
  background: var(--ffh-bg) !important;
  background-image: var(--ffh-bg) !important;
}

/* ==========================================================================
   氛围光斑
   --------------------------------------------------------------------------
   ★ 老写法（已在 1.5.0 移除）用固定 600px/500px 的圆 + 负偏移，
     靠 .ffdyy-hero 的 overflow:hidden 裁掉露出去的部分。
     问题：圆斑在 Hero 的上下左右四条边上还没淡到 0 就被「一刀切」，
     于是 Hero 的矩形轮廓被切出一条肉眼可见的直角边界
     （表现：Hero 整块比周围背景亮/蓝一点，四边有明显分界线，
      截图里看就是「套了一个框」——实际不是 border，是裁切痕）。

   ★ 新写法：渐变直接铺满 Hero 自身尺寸（inset:0，渐变盒子 = 裁切盒子），
     并且把「全透明」的节点放在 78%，早于圆的边缘。
     这样四条边上的 alpha 恒为 0，就算仍被 overflow:hidden 裁切，
     切口处也是全透明的 → 不再出现任何矩形边界。
     （半径上限：椭圆横向不超过「圆心到最近左右边」的距离，纵向同理，
       所以下面 rx/ry 都取得比到边距离小。）
   ========================================================================== */
.ffdyy-hero::before,
.ffdyy-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  pointer-events: none;
}

.ffdyy-hero::before {
  background: radial-gradient(ellipse 22% 46% at 78% 46%,
              var(--ffh-amb1, rgba(102, 126, 234, 0.20)) 0%,
              var(--ffh-amb1-0, rgba(102, 126, 234, 0)) 78%);
}

.ffdyy-hero::after {
  background: radial-gradient(ellipse 19% 34% at 20% 62%,
              var(--ffh-amb2, rgba(238, 110, 115, 0.13)) 0%,
              var(--ffh-amb2-0, rgba(238, 110, 115, 0)) 78%);
}

.ffdyy-hero .hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.ffdyy-hero .hero-main {
  min-width: 0;
}

/* 非左右布局时右图不占位 */
.ffdyy-hero .hero-side {
  display: none;
}

/* =========================================================================
 * 左文右图布局（后台填了「右侧配图」才启用）
 * ====================================================================== */
.ffdyy-hero.ffdyy-hero--split .hero-content {
  /* 不设上限：宽度完全交给外层容器（后台「排版宽度」可调），
     文字块与搜索框就能跟着一起往左靠。 */
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--ffh-side-w, 380px));
  align-items: center;
  gap: 48px;
  text-align: left;
}

.ffdyy-hero.ffdyy-hero--split.ffdyy-hero--side-left .hero-content {
  grid-template-columns: minmax(0, var(--ffh-side-w, 380px)) minmax(0, 1fr);
}

/* ---------- 宽度外扩：让文字与搜索框往左靠（参考图的排法） ----------
   子比的主题容器默认 1200px 居中，两边留白都很大。
   这里用 :has() 只对「带配图的 Hero」放大容器宽度，
   站内其它区域（文章列表、侧栏等）宽度不受影响。
   值由后台「排版宽度」控制，PHP 会输出 :root{--ffh-bleed:Npx}。 */
.fluid-widget-wrap:has(.ffdyy-hero--split) .widget-container,
.widget-container:has(.ffdyy-hero--split) {
  max-width: var(--ffh-bleed, 1280px) !important;
}

.ffdyy-hero.ffdyy-hero--split .hero-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

/* 显式钉在第 2 列第 1 行：不管 DOM 顺序、不管窗口多窄，
   配图都待在文字与搜索框的右侧，绝不会跑到上方去。 */
.ffdyy-hero.ffdyy-hero--split .hero-side {
  display: block;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  line-height: 0;
}

/* 左图时两列对调 */
.ffdyy-hero.ffdyy-hero--split.ffdyy-hero--side-left .hero-main {
  grid-column: 2;
}

.ffdyy-hero.ffdyy-hero--split.ffdyy-hero--side-left .hero-side {
  grid-column: 1;
}

/* 左对齐修正 */
.ffdyy-hero.ffdyy-hero--split .hero-logo-img {
  margin-left: 0;
  margin-right: 0;
}

.ffdyy-hero.ffdyy-hero--split .hero-tags {
  justify-content: flex-start;
}

.ffdyy-hero.ffdyy-hero--split .hero-search {
  margin-left: 0;
  margin-right: 0;
  max-width: 560px;
}

.ffdyy-hero.ffdyy-hero--split .hero-hot {
  justify-content: flex-start;
}

/* 有配图时文字放大一点，撑住版面 */
.ffdyy-hero.ffdyy-hero--split .hero-subtitle {
  font-size: 40px;
  letter-spacing: 3px;
}

.ffdyy-hero.ffdyy-hero--split .hero-description {
  font-size: 16px;
}

/* ---------- 右侧配图本体 ---------- */
.ffdyy-hero .hero-side img {
  display: block;
  width: 100%;
  max-width: var(--ffh-side-w, 380px);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 18px var(--ffh-glow, rgba(102, 126, 234, 0.45)))
          drop-shadow(0 0 46px var(--ffh-glow, rgba(102, 126, 234, 0.45)));
  animation: ffdyy-hero-float 6s ease-in-out infinite;
}

@keyframes ffdyy-hero-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ffdyy-hero .hero-side img {
    animation: none;
  }
}

/* ---------- Logo / 图片 ---------- */
.ffdyy-hero .hero-logo-img {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--ffh-c1), var(--ffh-c2));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px var(--ffh-glow-soft, rgba(102, 126, 234, 0.35));
  overflow: hidden;
}

.ffdyy-hero .hero-logo-img > i {
  font-size: 36px;
  color: #fff;
}

.ffdyy-hero .hero-logo-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* ---------- 标题 ---------- */
.ffdyy-hero .hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0 0 8px;
  line-height: 1.4;
  /* 主题色微光，深色底上「科技感」的来源；换主题时自动跟着变色 */
  text-shadow: 0 2px 26px var(--ffh-title-glow, rgba(102, 126, 234, 0.32));
}

.ffdyy-hero .hero-description {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  margin: 0 0 28px;
  line-height: 1.6;
}

/* ---------- 特性标签 ---------- */
.ffdyy-hero .hero-tags {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 38px;
  padding: 0;
}

/* 胶囊（默认）：半透明底 + 描边 */
.ffdyy-hero .hero-tags > li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 纯文字：无边框无底色 */
.ffdyy-hero.ffdyy-hero--tags-text .hero-tags > li {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 6px !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ffdyy-hero .hero-tags > li:hover {
  color: #fff;
}

/* ---------- 搜索框 ---------- */
.ffdyy-hero .hero-search {
  max-width: 600px;
  margin: 0 auto;
}

.ffdyy-hero .hero-search-form {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--ffh-radius);
  padding: 6px;
  margin: 0;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

.ffdyy-hero .hero-search-form:focus-within {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 4px var(--ffh-glow-soft, rgba(102, 126, 234, 0.2)), 0 12px 40px rgba(0, 0, 0, 0.2);
}

.ffdyy-hero .hero-search-input {
  flex: 1 1 auto;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  font-size: 16px;
  color: #fff !important;
  padding: 12px 18px;
  min-width: 0;
  box-shadow: none !important;
  height: auto !important;
  margin: 0 !important;
}

.ffdyy-hero .hero-search-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.ffdyy-hero .hero-search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  cursor: pointer;
  border-radius: calc(var(--ffh-radius) - 4px);
  background: linear-gradient(135deg, var(--ffh-c1), var(--ffh-c2));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 12px 28px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}

.ffdyy-hero .hero-search-button:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--ffh-glow, rgba(102, 126, 234, 0.4));
}

.ffdyy-hero .hero-search-button:active {
  transform: scale(0.97);
}

/* ---------- 热门搜索 ---------- */
.ffdyy-hero .hero-hot {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.ffdyy-hero .hero-hot-label {
  color: rgba(255, 255, 255, 0.45);
}

.ffdyy-hero .hero-hot a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  padding: 3px 12px;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}

.ffdyy-hero .hero-hot a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* =========================================================================
 * 「参考图同款」三件套（v1.8.0）
 * --------------------------------------------------------------------------
 * 参考图（荧光绿战术风）之所以好看，除了配色，还差三处细节：
 *   ① 标题 / 标签的文字本身就是主题色，并在深色底上叠了三层同色光晕
 *   ② 搜索框是「近透明底 + 一圈主题色细描边」，不是毛玻璃白块
 *   ③ 标签用竖线分隔（A | B | C），而不是一个个胶囊块
 * 下面就是这三件事，颜色全部走主题变量，换主题不用再回来调。
 * ====================================================================== */

/* ---------- ① 文字强调色：标题 + 标签 ---------- */
.ffdyy-hero.ffdyy-hero--title-accent .hero-subtitle {
  color: var(--ffh-c1, #667eea) !important;
  /* 三层同色光晕：近处收边、中距离出体积、远处铺氛围。
     深色底上的「荧光字」观感几乎全靠这个，不是靠把字调得更亮。 */
  text-shadow:
    0 0 12px var(--ffh-title-hot, rgba(102, 126, 234, 0.55)),
    0 0 38px var(--ffh-title-glow, rgba(102, 126, 234, 0.32)),
    0 0 72px var(--ffh-title-glow, rgba(102, 126, 234, 0.32));
}

/* 标签同色；连同 :hover 一起写，免得悬停时又跳回白色 */
.ffdyy-hero.ffdyy-hero--title-accent .hero-tags > li,
.ffdyy-hero.ffdyy-hero--title-accent .hero-tags > li:hover {
  color: var(--ffh-c1, #667eea) !important;
}

/* 副标题 / 描述故意不跟着变：只有标题和标签吃主题色，层次才立得住 */
.ffdyy-hero.ffdyy-hero--title-accent .hero-description {
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- ② 搜索框：主题色描边 ---------- */
.ffdyy-hero.ffdyy-hero--search-line .hero-search-form {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--ffh-c1-line, rgba(102, 126, 234, 0.55)) !important;
  /* 关掉毛玻璃：参考图那种「空心框」透过去就是页面本身 */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ffdyy-hero.ffdyy-hero--search-line .hero-search-form:focus-within {
  border-color: var(--ffh-c1, #667eea) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 3px var(--ffh-glow-soft, rgba(102, 126, 234, 0.3)) !important;
}

.ffdyy-hero.ffdyy-hero--search-line .hero-search-input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

/* ---------- ③ 标签竖线分隔 ---------- */
.ffdyy-hero.ffdyy-hero--tag-sep .hero-tags {
  /* 间距改由分隔线自带的左右 margin 控制，外层 gap 归零，免得翻倍 */
  gap: 0 !important;
}

.ffdyy-hero.ffdyy-hero--tag-sep .hero-tags > li + li::before {
  content: "|";
  display: inline-block;
  margin: 0 16px;
  opacity: 0.45;
  font-weight: 400;
  color: var(--ffh-c1, #667eea);
}

/* ---------- 平板/窄屏：不堆叠，配图仍在搜索框右侧，只等比缩小 ---------- */
@media (max-width: 992px) {
  .ffdyy-hero.ffdyy-hero--split .hero-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--ffh-side-w, 380px), 32vw));
    gap: 24px;
  }

  .ffdyy-hero.ffdyy-hero--split.ffdyy-hero--side-left .hero-content {
    grid-template-columns: minmax(0, min(var(--ffh-side-w, 380px), 32vw)) minmax(0, 1fr);
  }

  .ffdyy-hero.ffdyy-hero--split .hero-subtitle {
    font-size: 30px;
    letter-spacing: 2px;
  }

  .ffdyy-hero.ffdyy-hero--split .hero-description {
    font-size: 14px;
  }

  /* 文字列变窄后放开搜索框上限，让它吃满整列 */
  .ffdyy-hero.ffdyy-hero--split .hero-search {
    max-width: none;
  }
}

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
  .hero-section.ffdyy-hero {
    padding: 44px 16px 50px;
  }
  /* 手机上标签必然会折行，而 CSS 没法判断「谁是这一行的第一个」，
     竖线就会跑到行首去。折行时干脆收起分隔线、换回普通间距。 */
  .ffdyy-hero.ffdyy-hero--tag-sep .hero-tags {
    gap: 8px !important;
  }
  .ffdyy-hero.ffdyy-hero--tag-sep .hero-tags > li + li::before {
    content: none;
  }
  /* 后台取消勾选「手机上显示配图」时，小屏只留文字和搜索框 */
  .ffdyy-hero.ffdyy-hero--side-hide-mobile .hero-side {
    display: none;
  }
  /* 配图宽度跟着列宽走，不再单独封顶 */
  .ffdyy-hero.ffdyy-hero--split .hero-side img {
    max-width: 100%;
  }
  .ffdyy-hero.ffdyy-hero--split .hero-logo-img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin-bottom: 10px;
  }
  .ffdyy-hero.ffdyy-hero--split .hero-logo-img > i {
    font-size: 26px;
  }
  .ffdyy-hero.ffdyy-hero--split .hero-subtitle {
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 6px;
  }
  .ffdyy-hero.ffdyy-hero--split .hero-description {
    font-size: 13px;
    margin-bottom: 16px;
  }
  .ffdyy-hero.ffdyy-hero--split .hero-tags {
    gap: 8px;
    margin-bottom: 20px;
  }
  .ffdyy-hero .hero-subtitle {
    font-size: 22px;
  }
  .ffdyy-hero .hero-description {
    font-size: 14px;
  }
  .ffdyy-hero .hero-tags {
    gap: 8px;
  }
  .ffdyy-hero .hero-tags > li {
    font-size: 12px;
    padding: 5px 14px !important;
  }
  .ffdyy-hero.ffdyy-hero--tags-text .hero-tags > li {
    padding: 0 4px !important;
  }
  .ffdyy-hero .hero-search-button {
    padding: 12px 20px;
    font-size: 14px;
  }
  .ffdyy-hero .hero-search-input {
    font-size: 15px;
    padding: 10px 14px;
  }
}

@media (max-width: 480px) {
  .ffdyy-hero .hero-search-button > span {
    display: none;
  }
  .ffdyy-hero .hero-search-button {
    padding: 12px 16px;
  }
}

/* ---------- 小屏手机：两栏再收窄，保证搜索框仍然够用 ---------- */
@media (max-width: 560px) {
  .ffdyy-hero.ffdyy-hero--split .hero-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--ffh-side-w, 380px), 30vw));
    gap: 14px;
  }

  .ffdyy-hero.ffdyy-hero--split.ffdyy-hero--side-left .hero-content {
    grid-template-columns: minmax(0, min(var(--ffh-side-w, 380px), 30vw)) minmax(0, 1fr);
  }

  .ffdyy-hero.ffdyy-hero--split .hero-logo-img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    margin-bottom: 8px;
  }

  .ffdyy-hero.ffdyy-hero--split .hero-logo-img > i {
    font-size: 20px;
  }

  .ffdyy-hero.ffdyy-hero--split .hero-subtitle {
    font-size: 17px;
    letter-spacing: 0;
    margin-bottom: 4px;
  }

  .ffdyy-hero.ffdyy-hero--split .hero-description {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .ffdyy-hero.ffdyy-hero--split .hero-tags {
    gap: 6px;
    margin-bottom: 14px;
  }

  .ffdyy-hero.ffdyy-hero--split .hero-tags > li {
    font-size: 11px;
  }

  .ffdyy-hero.ffdyy-hero--split .hero-search-form {
    padding: 4px;
  }

  .ffdyy-hero.ffdyy-hero--split .hero-search-input {
    padding: 9px 10px;
    font-size: 13px;
  }

  .ffdyy-hero.ffdyy-hero--split .hero-search-button {
    padding: 9px 12px;
    font-size: 13px;
  }

  .ffdyy-hero.ffdyy-hero--split .hero-hot {
    font-size: 11px;
    gap: 4px;
    margin-top: 10px;
  }
}

/* =========================================================================
 * 后台设置页专用
 * ====================================================================== */
.ffdyy-hero-admin__layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.ffdyy-hero-admin__form {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 780px;
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  padding: 8px 20px 20px;
}

.ffdyy-hero-admin__preview {
  flex: 0 0 420px;
  position: sticky;
  top: 40px;
}

.ffdyy-preview-shell {
  /* 实际底色由 PHP 按当前配色主题内联输出（用的是「整站页面背景」那套渐变，
     和前台 Hero 垫着的那层一致），这里只是一个中性兜底，避免样式没加载时闪白。 */
  background: #14162b;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  overflow: hidden;
}

/* =========================================================================
 * 后台：配色主题选择卡
 * ====================================================================== */
.ffdyy-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  max-width: 780px;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
}

.ffdyy-theme-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dcdcde;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.ffdyy-theme-card:hover {
  border-color: #8c8f94;
}

.ffdyy-theme-card.is-active {
  border-color: #2271b1;
  box-shadow: 0 0 0 1px #2271b1;
  background: #f0f6fc;
}

/* 原生 radio 保留可点击/可聚焦，只是不画出来 */
.ffdyy-theme-card input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.ffdyy-theme-card:focus-within {
  box-shadow: 0 0 0 2px #2271b1;
}

/* 主题卡缩略图：底色 = 该主题的整站页面背景，中间圆点 = 主色渐变。
   一眼看出「换完之后页面是什么调 + 按钮是什么色」，不用来回试。 */
.ffdyy-theme-swatch {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.ffdyy-theme-swatch > i {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* 「自定义」卡片：色轮示意（没有主色圆点，整块就是色轮） */
.ffdyy-theme-swatch--custom {
  background: conic-gradient(#ff2e63, #ff9f1c, #a3e635, #22d3ee, #667eea, #b388ff, #ff2e63);
}

.ffdyy-theme-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.ffdyy-theme-meta strong {
  font-size: 13px;
  color: #1d2327;
}

.ffdyy-theme-meta em {
  font-size: 11px;
  font-style: normal;
  color: #646970;
}

/* 自定义色盘区：选了预设就淡化（可点、值照常提交，只是提示它此刻不生效） */
.ffdyy-custom-colors {
  max-width: 780px;
  margin-top: 14px;
  padding: 12px 14px 4px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
  transition: opacity 0.2s;
}

.ffdyy-custom-colors.is-muted {
  opacity: 0.45;
}

.ffdyy-custom-colors__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #50575e;
}

.ffdyy-custom-colors__field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 18px 8px 0;
}

.ffdyy-custom-colors__field > span {
  font-size: 12px;
  color: #50575e;
}

.ffdyy-preview-wrap .hero-section.ffdyy-hero {
  padding: 28px 18px 32px;
}

/* 后台预览宽度只有 400 多 px，左右布局等比缩小，方便看清结构 */
.ffdyy-preview-wrap .ffdyy-hero--split .hero-content {
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 14px;
}

.ffdyy-preview-wrap .ffdyy-hero--split.ffdyy-hero--side-left .hero-content {
  grid-template-columns: 132px minmax(0, 1fr);
}

.ffdyy-preview-wrap .ffdyy-hero .hero-side img {
  max-width: 132px;
  filter: drop-shadow(0 0 10px var(--ffh-glow, rgba(102, 126, 234, 0.45)));
  animation: none;
}

.ffdyy-preview-wrap .ffdyy-hero--split .hero-subtitle {
  font-size: 17px;
  letter-spacing: 0;
}

.ffdyy-preview-wrap .ffdyy-hero--split .hero-description {
  font-size: 12px;
  margin-bottom: 12px;
}

.ffdyy-preview-wrap .ffdyy-side-thumb img {
  max-width: 132px;
}

.ffdyy-preview-wrap .hero-subtitle {
  font-size: 20px;
  letter-spacing: 1px;
}

.ffdyy-preview-wrap .hero-description {
  font-size: 13px;
  margin-bottom: 18px;
}

.ffdyy-preview-wrap .hero-logo-img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.ffdyy-preview-wrap .hero-logo-img > i {
  font-size: 28px;
}

.ffdyy-preview-wrap .hero-tags {
  gap: 10px;
  margin-bottom: 22px;
}

.ffdyy-preview-wrap .hero-tags > li {
  font-size: 12px;
}

.ffdyy-preview-wrap .hero-search-input {
  font-size: 14px;
  padding: 10px 14px;
}

.ffdyy-preview-wrap .hero-search-button {
  font-size: 14px;
  padding: 10px 18px;
}

.ffdyy-logo-thumb {
  margin-top: 8px;
}

.ffdyy-logo-thumb img {
  max-width: 96px;
  height: auto;
  border: 1px solid #dcdcde;
  border-radius: 10px;
  padding: 4px;
  background: #f6f7f7;
}

@media screen and (max-width: 1200px) {
  .ffdyy-hero-admin__layout {
    flex-direction: column;
  }
  .ffdyy-hero-admin__preview {
    position: static;
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ==========================================================================
   外壳豁免：把 Hero 外面那几层「小工具外壳」的边框 / 圆角 / 背景清掉
   --------------------------------------------------------------------------
   子比主题（以及很多站点的自定义 CSS）会给 .zib-widget / .fluid-widget-wrap
   画一条 1px 半透明边框 + 14px 圆角。Hero 装在小工具里，就会被套上一圈框。

   常见做法是用 :has() 做豁免，但 :has() 在旧内核浏览器（Chrome < 105、
   部分国产浏览器的兼容模式）下**整条规则会被直接丢弃** → 框又冒出来。
   所以这里上双保险：
     ① .ffdyy-hero-shell —— 插件渲染时输出的一小段 JS，逐层打在祖先元素上，
        普通选择器，任何浏览器都认；
     ② :has() 版本 —— 给现代浏览器兜底（JS 还没跑起来时也能立刻生效）。

   ★ 只清 padding，绝不动 margin —— .widget-container 靠 margin:auto 水平居中。
   ========================================================================== */
.ffdyy-hero-shell {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

.fluid-widget-wrap:has(.hero-section.ffdyy-hero),
.widget-container:has(.hero-section.ffdyy-hero),
.zib-widget:has(.hero-section.ffdyy-hero) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}