/* =============================================================
   FanCloud 模型广场（/pricing）卡片样式覆盖
   —— 长方块 + 圆角，参照 CCTQ 卡片形态
   作用域：<html data-fs-pricing="1">（由 pricing-card.js 设置）
   仅改视觉，不改数据、交互与路由
   可调参数：--fs-card-radius（圆角）、--fs-card-pad（内边距）
   ============================================================= */

@media (min-width: 640px) {
  html[data-fs-pricing="1"] {
    --fs-card-radius: 8px;
    --fs-card-pad: 12px 14px 30px;
  }

  html[data-fs-pricing="1"] [data-slot="card"] {
    position: relative;
    border-radius: var(--fs-card-radius) !important;
    padding: var(--fs-card-pad) !important;
    gap: 8px !important;
    box-shadow: none !important;
  }

  /* ---------- 头部：图标 / 名称 / 复制 ---------- */
  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-header"] {
    padding: 0 !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-header"] > div[aria-hidden="true"] {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-header"] > div[aria-hidden="true"] > * {
    max-width: 20px;
    max-height: 20px;
  }

  /* 标题区为右上角「详情」按钮让出位置 */
  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-header"] > div:not([aria-hidden]) {
    padding-right: 50px;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-header"] h3 {
    display: block !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: unset !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-header"] h3 + p {
    margin-top: 2px !important;
    font-size: 11px !important;
  }

  /* ---------- 内容区：价格提到名称下方，描述其次 ---------- */
  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-content"] {
    padding: 0 !important;
    gap: 6px !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-content"] > div[role="group"] {
    order: 1;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 12px !important;
  }

  /* 「按量计费 / 单价说明」保留，但并入价格行、用主题色强调 */
  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-content"] > div[role="group"] > span {
    display: inline !important;
    flex: 0 0 auto !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: var(--primary) !important;
    white-space: nowrap !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-content"] > div[role="group"] > span * {
    font-size: 11px !important;
    color: var(--primary) !important;
  }

  /* 价格：由两行网格改成一行内联 */
  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-content"] > div[role="group"] > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 16px !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-content"] > div[role="group"] > div > div {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 5px !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-content"] > div[role="group"] > div > div > span:first-child {
    font-size: 12px !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-content"] > div[role="group"] > div > div > span:last-child {
    font-size: 13px !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-content"] > div[role="group"] > div > div > span:last-child > span {
    font-size: 11px !important;
  }

  /* 描述排在价格之后，单行省略 */
  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-content"] > div:first-child {
    order: 2;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-content"] > div:first-child p {
    display: block !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: unset !important;
  }

  /* 分组 / 端点：贴卡片底边的整行小字 */
  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-content"] > dl {
    position: absolute !important;
    right: 14px !important;
    bottom: 8px !important;
    left: 14px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 2px 14px !important;
    min-width: 0 !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-content"] > dl > div {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* ---------- 底栏：性能指标靠右下，状态条排最后 ---------- */
  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-footer"] {
    margin-top: auto !important;
    padding: 0 !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-footer"] > div {
    justify-content: flex-end !important;
    border-top-width: 0 !important;
    padding-top: 0 !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-footer"] dl {
    gap: 14px !important;
    align-items: center !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-footer"] dl > div {
    white-space: nowrap !important;
  }

  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-footer"] dl > div:first-child {
    order: 3;
  }

  /* 「详情」按钮移到卡片右上角，位于复制按钮左侧 */
  html[data-fs-pricing="1"] [data-slot="card"] [data-slot="card-footer"] button {
    position: absolute !important;
    top: 11px !important;
    right: 48px !important;
    height: 24px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    background: transparent !important;
  }
}