/* ============================================================
   FluxToken 控制台顶栏 · 「查看模型」按钮  /fx/plaza-cta.css
   把顶栏那颗「模型广场」链接改成主页同款荧光绿药丸。

   取自参考图：填充 #c4e201、深墨字 #15200c、圆角=高度一半（完全圆头）、粗体。
   和主页的 .plaza-cta、以及「开始接入」是同一套色。

   纯样式，不动任何原生节点。图标还是用顶栏原来那颗（模型广场的
   grid 图标），只把颜色改成深墨 —— currentColor 跟着走。

   为什么要 !important：这些属性都被 Tailwind 的工具类写在锚点上
   （text-gray-600 / dark:text-dark-400 / hover:bg-gray-100 …），
   而且暗色变体是 .dark 前缀，特异性比这里高。加上 !important 才压得住，
   也不用管样式表的加载顺序。
   ============================================================ */

header a[href^="/model-plaza"],
header a[href^="/custom/"] {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  gap: 7px !important;
  border: 1px solid transparent !important;
  border-radius: 100px !important;
  background: #c4e201 !important;
  background-image: none !important;
  color: #15200c !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  transition: background-color .18s ease, transform .12s ease !important;
}

/* 暗色模式下 Tailwind 会给一圈深底色，这里一并压掉，两种模式都保持荧光绿 */
.dark header a[href^="/model-plaza"],
.dark header a[href^="/custom/"] {
  background: #c4e201 !important;
  color: #15200c !important;
}

header a[href^="/model-plaza"]:hover,
header a[href^="/model-plaza"]:focus-visible,
header a[href^="/custom/"]:hover,
header a[href^="/custom/"]:focus-visible {
  background: #d2f993 !important;
  color: #15200c !important;
}

header a[href^="/model-plaza"]:active,
header a[href^="/custom/"]:active {
  transform: scale(.96) !important;
}

/* 图标：线宽和尺寸对齐主页那颗，颜色锁死深墨。
   stroke 直接写，是为了不依赖图标内部用的是 currentColor 还是写死的值；
   CSS 的 stroke 比 SVG 的 presentation attribute 优先，两种都能覆盖。 */
header a[href^="/model-plaza"] svg,
header a[href^="/custom/"] svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  color: #15200c !important;
  stroke: #15200c !important;
  stroke-width: 2.25 !important;
  transition: none !important;
}

/* 文字那一格 —— 脚本把「模型广场」换成「查看模型」后，这里保证不换行 */
header a[href^="/model-plaza"] > span,
header a[href^="/custom/"] > span {
  color: #15200c !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* ---------- 窄屏：跟主页一样收一档 ---------- */
@media (max-width: 760px) {
  header a[href^="/model-plaza"],
  header a[href^="/custom/"] {
    min-height: 34px !important;
    padding: 0 13px !important;
    gap: 6px !important;
    font-size: 11px !important;
  }
  header a[href^="/model-plaza"] svg,
  header a[href^="/custom/"] svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  header a[href^="/model-plaza"],
  header a[href^="/custom/"] {
    transition: none !important;
  }
}