/* =============================================================
 * kk-dark-fixes.css — fix light-theme leakage on member pages
 *
 * Originally deployed for the deep-audit issues (Vant empty
 * panel + recharge-shell input). Expanded to cover the rest
 * of /recharge after the second xyue snapshot pass.
 *
 * Section index
 *   1. .van-empty             — solid white empty-state card
 *   2. .recharge-shell input  — amount input (dark green)
 *   3. .recharge-header       — page title + intro paragraph
 *   4. .custom-input-wrap LABEL — was missed (no !important)
 *   5. mark.highlight-{blue,green,gold} — accent marks inside
 *      plan copy were left at slate-900, unreadable on dark
 *   6. .plan-ticket / .plan-ribbon — badge text colors
 *   7. .back-button            — Vant left-arrow icon
 *
 * Deployed as ?v=N — register in index.html.
 *   v1: section 1-2 (van-empty + amount input)
 *   v2: section 3-7 (header, label, marks, badges, back arrow)
 *   v3: section 8-9 (.service-card SECTION + p.plan-copy)
 *   v4: section 10-15 (global STRONG/H2/H3 + profile-edit radio +
 *                       home-display empty zones + zone-publish uploader
 *                       + zone-publish plain btn + about tabs)
 *   v5: section 12b — real class names are .empty-photo-panel /
 *                        .empty-text-panel (not [class*="photo-zone"])
 *   v6: section 12c — tried .profile-edit-shell / .profile-password-shell;
 *                      selector miss (real shells are .page-shell.edit-shell /
 *                      .page-shell.password-shell)
 *   v7: section 12c — corrected to .page-shell.edit-shell label and
 *                      .page-shell.password-shell label
 * ============================================================= */

/* ----- 1. Vant empty-state card (solid white panel) -----
 * Hits /home, /wallet, /messages, /im. Default Vant
 *   .van-empty { background: #fff; }
 *   .van-empty__description p { color: #969799; }
 *   inline <svg> gradient #F2F3F5 / #DCDFE6 / #C8C9CC
 * produces a glaring white card with grey-on-white copy on
 * the dark page. Make it transparent + on-palette.
 */
.van-empty,
.van-empty__image,
.van-empty__description,
.van-empty__bottom {
  background: transparent !important;
}
.van-empty__description p {
  color: var(--kkdating-text, #eeeef3) !important;
}
.van-empty__bottom {
  color: var(--kkdating-text, #eeeef3);
}
.van-empty__image svg,
.van-empty__image img {
  /* Default illustration is a light-gray Vant line drawing.
   * Invert + brighten, then drop opacity to ~50% so it becomes
   * a subtle white-on-dark icon. */
  filter: invert(1) brightness(1.4);
  opacity: 0.5;
}

/* ----- 2. /recharge amount input -----
 * The custom amount widget uses:
 *   .recharge-shell                color: rgb(43, 24, 48)  dark purple
 *   .custom-input-wrap             color: rgb(23, 99, 69)  dark green
 *   .custom-input-wrap input       color: rgb(16, 37, 29)  very dark green
 * All unreadable on the #07070d page bg. Re-skin to the dark
 * theme text token.
 */
.recharge-shell {
  color: var(--kkdating-text, #eeeef3);
}
.recharge-shell .custom-input-wrap {
  color: var(--kkdating-text, #eeeef3);
}
.recharge-shell .custom-input-wrap input {
  color: var(--kkdating-text, #eeeef3) !important;
  -webkit-text-fill-color: var(--kkdating-text, #eeeef3);
  caret-color: var(--kkdating-primary, #a78bfa);
}
.recharge-shell .custom-input-wrap input::placeholder {
  color: rgba(238, 238, 243, 0.45);
}

/* ----- 3. /recharge header (title + intro) -----
 * The <strong> and <p> inside .recharge-header inherit a
 * very dark purple from the build (rgb(36,17,43) / rgb(76,49,78)),
 * invisible on #07070d. The original comment said "plan-item /
 * highlight marks keep their own per-element colors" but the
 * title paragraph is not a plan item and must be themed.
 */
.recharge-shell .recharge-header strong,
.recharge-shell .recharge-header p {
  color: var(--kkdating-text, #eeeef3) !important;
}
.recharge-shell .recharge-header p {
  color: rgba(238, 238, 243, 0.72) !important;
}

/* ----- 4. .custom-input-wrap as LABEL -----
 * The custom amount LABEL <label class="custom-input-wrap">
 * holds the "充值金额" caption and renders as rgb(23, 99, 69)
 * dark green. Section 2's rule covers the wrapper but Vant's
 * field-label has a higher-specificity rule — beat it with
 * !important.
 */
.recharge-shell label.custom-input-wrap,
.recharge-shell .custom-input-wrap.van-field__label,
.recharge-shell .van-field__label.custom-input-wrap {
  color: var(--kkdating-text, #eeeef3) !important;
  -webkit-text-fill-color: var(--kkdating-text, #eeeef3);
}

/* ----- 5. /recharge accent marks inside plan copy -----
 * mark.highlight-blue   "首页图"        (per-feature)
 * mark.highlight-green  "免费翻译"      (per-feature)
 * mark.highlight-gold   "赠送金币"      (premium-only)
 *                      "谁喜欢我"
 *                      "消息已读未读"
 * All three classes land at rgb(15, 23, 42) (slate-900)
 * — invisible on the dark plan-item card. Re-skin each
 * to a bright accent on a translucent background so the
 * highlighted keyword still pops inside the copy.
 */
.recharge-shell mark.highlight-blue {
  color: #93c5fd !important;            /* bright blue */
  background: rgba(96, 165, 250, 0.18) !important;
  border-radius: 4px;
  padding: 0 4px;
}
.recharge-shell mark.highlight-green {
  color: #86efac !important;            /* bright green */
  background: rgba(74, 222, 128, 0.18) !important;
  border-radius: 4px;
  padding: 0 4px;
}
.recharge-shell mark.highlight-gold {
  color: #fde68a !important;            /* bright gold */
  background: rgba(250, 204, 21, 0.22) !important;
  border-radius: 4px;
  padding: 0 4px;
}

/* ----- 6. .plan-ticket / .plan-ribbon -----
 * The "推荐" badge on Plus and the "最受欢迎" ribbon on
 * Premium both render dark (rgb(77,45,0) / similar) on
 * the dark page. Re-skin to bright gradient with dark text.
 */
.recharge-shell .plan-ticket {
  background: linear-gradient(135deg, #fbbf24, #f97316) !important;
  color: #1f1300 !important;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.recharge-shell .plan-ribbon {
  background: linear-gradient(135deg, #a78bfa, #6366f1) !important;
  color: #ffffff !important;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}

/* ----- 7. .back-button (Vant left arrow) -----
 * The header back button is an <i> font-icon that often
 * inherits a near-black color. Force light.
 */
.recharge-shell .back-button,
.recharge-shell .back-button i,
.recharge-shell .back-button .van-icon {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* ----- 8. .service-card SECTION -----
 * The big feature-list card at the top of /recharge is
 * rendered as a <section class="service-card">. Its inline
 * color (rgb(43, 24, 48), dark purple) is inherited by every
 * descendant that does not set its own color, making the
 * introductory copy unreadable on #07070d. Force the section
 * itself + any plain descendants to the theme text.
 */
.recharge-shell .service-card,
.recharge-shell section.service-card {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* ----- 9. p.plan-copy -----
 * Each plan item has a <p class="plan-copy"> with body text
 * like "20 Gold coins + 3 首页图, no免费翻译。". The build
 * styles it rgb(61, 41, 62) — a muted purple — invisible on
 * the dark page. Lift it to the theme text colour.
 */
.recharge-shell p.plan-copy {
  color: rgba(238, 238, 243, 0.78) !important;
}

/* ----- 10. Global STRONG / H1 / H2 / H3 / H4 (page titles) -----
 * Survey found the same slate-900 (rgb(17,24,39)) or warm
 * dark brown rgb(51,31,18) / rgb(27,20,15) leaking into
 * the page-level <strong> and <h2> <h3> across every member
 * page: /home-display (首页展示, 基础信息, 国家 美国),
 * /profile/edit (修改信息), /profile/password (修改密码),
 * /zone/publish (发布动态), /about (H3 "关于我们").
 * Lift all bare headings to the theme text colour.
 */
body strong,
body h1,
body h2,
body h3,
body h4 {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* ----- 11. .van-radio__label--disabled -----
 * /profile/edit renders the 男/女 radio labels with
 * .van-radio__label--disabled, which Vant styles rgb(17,24,39).
 * Override so the unselected radio label is readable.
 */
.van-radio__label--disabled,
.van-radio--disabled .van-radio__label {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* ----- 12. /home-display empty photo / bio zones -----
 * Two glaring white boxes — "添加展示图" and "写一段自我
 * 介绍" — sit on the dark page. Their wrappers are styled
 * white by the build. Make them translucent.
 */
.home-display-shell [class*="photo-zone"],
.home-display-shell [class*="bio-zone"],
.home-display-shell [class*="empty-zone"],
.home-display-shell [class*="upload-zone"],
.home-display-shell .van-uploader__upload,
.home-display-shell .van-empty,
.meet-display-shell [class*="photo-zone"],
.meet-display-shell [class*="bio-zone"],
.meet-display-shell [class*="empty-zone"],
.meet-display-shell [class*="upload-zone"],
.meet-display-shell .van-uploader__upload,
.meet-display-shell .van-empty {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--kkdating-text, #eeeef3) !important;
  border: 1px dashed rgba(167, 139, 250, 0.3) !important;
}

/* ----- 12b. .empty-photo-panel / .empty-text-panel -----
 * /home-display and /meet-display render two "添加展示图" /
 * "写一段自我介绍" panels in near-white rgb(255,253,248) with
 * dark amber rgb(154,99,48) text — invisible on the dark page.
 * The [class*="photo-zone"] / [class*="bio-zone"] wildcards in
 * section 12 missed them (real class names are .empty-photo-panel /
 * .empty-text-panel). This targets the actual classes.
 */
.home-display-shell .empty-photo-panel,
.home-display-shell .empty-text-panel,
.meet-display-shell .empty-photo-panel,
.meet-display-shell .empty-text-panel {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--kkdating-text, #eeeef3) !important;
  border: 1px dashed rgba(167, 139, 250, 0.3) !important;
}

/* ----- 12c. bare <label> on /profile/edit + /profile/password -----
 * The build renders field captions as bare <label class=""> (no
 * class) styled with Tailwind rose-700 rgb(190,18,60). The v5
 * selector .van-cell__title / .van-field__label was a miss because
 * those Vant elements don't exist on the page. Real wrapper shells
 * (per ancestor probe) are .page-shell.edit-shell and
 * .page-shell.password-shell. Lift the bare label colour to the
 * theme text token, scoped to those shells so we don't clobber any
 * future <label> elsewhere that may legitimately use a different
 * colour.
 */
.page-shell.edit-shell label,
.page-shell.password-shell label {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* ----- 13. /zone/publish image-uploader placeholder -----
 * Same issue: the single 88px white square with the camera
 * icon. Theme it like the home-display zones.
 */
.zone-publish-shell .van-uploader__upload,
.zone-publish-shell [class*="upload"],
.zone-publish-shell [class*="upload-zone"] {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--kkdating-text, #eeeef3) !important;
  border: 1px dashed rgba(167, 139, 250, 0.3) !important;
}

/* ----- 14. /zone/publish plain 清空 button -----
 * The "清空" button is a Vant .van-button--plain with white
 * background and red text — clashes with the dark theme.
 * Re-skin to a transparent ghost button.
 */
.zone-publish-shell .van-button--plain,
.zone-publish-shell button.van-button--plain {
  background: transparent !important;
  color: var(--kkdating-text, #eeeef3) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}

/* ----- 15. /about tabs -----
 * The "关于我们 / Safe socializing / Privacy Policy / ..."
 * tab strip renders with white pill backgrounds and slate
 * text in inactive state. Theme the nav and text.
 */
.about-shell .van-tabs__nav,
.about-shell .van-tab,
.about-shell .van-tab__text,
.about-shell .van-tab--active .van-tab__text {
  background: transparent !important;
  color: var(--kkdating-text, #eeeef3) !important;
}
.about-shell .van-tab--active {
  background: var(--kkdating-primary, #a78bfa) !important;
  color: #0b0b16 !important;
}
.about-shell .van-tab--active .van-tab__text {
  color: #0b0b16 !important;
}