/* ══════════════════════════════════════════════════════════
 * ZERO 套餐卡片美化 v2 —— 双主题
 *
 * v1 的错误：全部按深色写死（白字、浅色渐变），白底上看不清。
 * v2 结构：默认（无 .dark）= 浅色；html.dark = 深色覆盖。
 *
 * 锚点（已验证只在套餐页命中）：
 *   [class*="xl:grid-cols-3"][class*="md:grid-cols-2"]        套餐网格
 *   [class*="md:grid-cols-3"]:not([class*="xl:grid-cols-3"])  顶部三卡
 *
 * DOM 结构：
 *   .ant-card
 *     .ant-card-head > .ant-card-head-wrapper > .ant-card-head-title   套餐名
 *     .ant-card-body
 *       .ant-statistic > .ant-statistic-content（prefix/value/suffix）  价格
 *       p.my-3                                                        空占位
 *       .ant-descriptions
 *         table > tbody > tr > td.ant-descriptions-item
 *           .ant-descriptions-item-container > span.label + span.content  配额
 *       button.ant-btn                                                 续费
 * ══════════════════════════════════════════════════════════ */

/* ─────────────── 浅色（默认）─────────────── */

[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] > .ant-card {
  position: relative;
  border-radius: 14px !important;
  border: 1px solid rgba(15, 40, 90, .10) !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 40, 90, .05), 0 10px 28px -18px rgba(15, 40, 90, .28) !important;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s, border-color .22s !important;
  overflow: hidden;
}
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] > .ant-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, .38) !important;
  box-shadow: 0 2px 4px rgba(15, 40, 90, .06), 0 20px 44px -20px rgba(37, 99, 235, .42) !important;
}
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] > .ant-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, #2563eb, #7c3aed 55%, #06b6d4);
  z-index: 1;
}

/* 卡片头 */
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-card-head {
  border-bottom: 1px solid rgba(15, 40, 90, .07) !important;
  padding: 0 26px !important;
  min-height: 52px !important;
  background: transparent !important;
}
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-card-head-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f1e33 !important;
  letter-spacing: .2px;
  padding: 15px 0 13px !important;
}
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-card-body { padding: 20px 26px 22px !important; }

/* 价格：白底用深色渐变，保证对比度 */
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-statistic-content {
  font-size: 36px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -.6px;
  background: linear-gradient(112deg, #1d4ed8 0%, #7c3aed 55%, #0891b2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-statistic-content-prefix {
  font-size: 22px !important;
  -webkit-text-fill-color: #4b63a8;
  margin-inline-end: 2px !important;
}
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-statistic-content-suffix {
  font-size: 14px !important;
  -webkit-text-fill-color: rgba(15, 30, 60, .5);
  font-weight: 500;
  margin-inline-start: 6px !important;
}

/* 空占位 → 细分隔线 */
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-card-body > p.my-3 {
  margin: 14px 0 8px !important;
  height: 1px;
  padding: 0 !important;
  background: linear-gradient(90deg, rgba(15, 40, 90, .14), rgba(15, 40, 90, 0));
}

/* 配额行 */
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-descriptions-view { border: 0 !important; }
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-descriptions-row > td.ant-descriptions-item {
  border-bottom: 0 !important;
  padding: 0 !important;
}
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-descriptions-item-container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(15, 40, 90, .10);
}
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-descriptions-row:last-child .ant-descriptions-item-container {
  border-bottom: 0 !important;
}
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-descriptions-item-label {
  color: rgba(15, 30, 60, .62) !important;
  font-size: 13px !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-descriptions-item-label::before {
  content: '✓';
  color: #0d9f6e;
  font-weight: 800;
  font-size: 12px;
}
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-descriptions-item-content {
  color: #0f1e33 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-variant-numeric: tabular-nums;
}

/* 按钮（两套主题通用，渐变本身对比度够） */
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-card-body > button.ant-btn {
  width: 100% !important;
  height: 40px !important;
  margin-top: 18px !important;
  border-radius: 10px !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  background: linear-gradient(120deg, #2563eb, #6d5cff) !important;
  box-shadow: 0 8px 20px -12px rgba(37, 99, 235, .9) !important;
  transition: filter .18s, transform .12s !important;
}
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-card-body > button.ant-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
[class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-card-body > button.ant-btn:active {
  transform: translateY(0);
  filter: brightness(.96);
}

/* 顶部三卡（浅色） */
[class*="md:grid-cols-3"]:not([class*="xl:grid-cols-3"]) > .ant-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 40, 90, .09) !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 40, 90, .04) !important;
}
[class*="md:grid-cols-3"]:not([class*="xl:grid-cols-3"]) > .ant-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .85), rgba(124, 58, 237, .6), rgba(6, 182, 212, .45));
}
[class*="md:grid-cols-3"]:not([class*="xl:grid-cols-3"]) > .ant-card > .ant-card-body { padding: 20px 22px !important; }
[class*="md:grid-cols-3"]:not([class*="xl:grid-cols-3"]) .ant-statistic-content { font-weight: 700 !important; }

/* ─────────────── 深色覆盖 ─────────────── */

html.dark [class*="xl:grid-cols-3"][class*="md:grid-cols-2"] > .ant-card {
  border: 1px solid rgba(120, 160, 255, .14) !important;
  background: linear-gradient(165deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)) !important;
  box-shadow: none !important;
}
html.dark [class*="xl:grid-cols-3"][class*="md:grid-cols-2"] > .ant-card:hover {
  border-color: rgba(90, 150, 255, .5) !important;
  box-shadow: 0 16px 40px -16px rgba(70, 130, 255, .55), 0 0 0 1px rgba(90, 150, 255, .18) !important;
}

html.dark [class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-card-head {
  border-bottom-color: rgba(255, 255, 255, .06) !important;
}
html.dark [class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-card-head-title {
  color: #eaf2ff !important;
}

html.dark [class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-statistic-content {
  background: linear-gradient(115deg, #8ec5ff 0%, #b79bff 55%, #7ee7dc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.dark [class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-statistic-content-prefix {
  -webkit-text-fill-color: #a9c7ff;
}
html.dark [class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-statistic-content-suffix {
  -webkit-text-fill-color: rgba(255, 255, 255, .45);
}

html.dark [class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-card-body > p.my-3 {
  background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
}

html.dark [class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-descriptions-item-container {
  border-bottom-color: rgba(255, 255, 255, .07);
}
html.dark [class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-descriptions-item-label {
  color: rgba(255, 255, 255, .62) !important;
}
html.dark [class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-descriptions-item-label::before {
  color: #38d39f;
  filter: drop-shadow(0 0 4px rgba(56, 211, 159, .5));
}
html.dark [class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-descriptions-item-content {
  color: #fff !important;
}

html.dark [class*="xl:grid-cols-3"][class*="md:grid-cols-2"] .ant-card-body > button.ant-btn {
  background: linear-gradient(120deg, #2f7cf6, #6d5cff) !important;
  box-shadow: 0 8px 22px -10px rgba(70, 120, 255, .9) !important;
}

html.dark [class*="md:grid-cols-3"]:not([class*="xl:grid-cols-3"]) > .ant-card {
  border-color: rgba(120, 160, 255, .10) !important;
  background: linear-gradient(165deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)) !important;
  box-shadow: none !important;
}