/* Graphite Cards v1 — neutral dark cards with brighter readable depth. */
body:not(.theme-light):not(.adm-body) {
  --ui-surface: #171a1f;
  --ui-surface-raised: #1e2229;
  --ui-surface-deep: #0f1216;
  --ui-border: rgba(176, 198, 224, .13);
  --ui-border-hover: rgba(117, 181, 255, .34);
  --ui-card-fill:
    radial-gradient(125% 115% at 8% -8%, rgba(128, 170, 214, .095) 0%, transparent 40%),
    linear-gradient(145deg, rgba(29, 33, 40, .985) 0%, rgba(18, 21, 26, .995) 72%);
  --ui-card-fill-hover:
    radial-gradient(125% 115% at 10% -8%, rgba(115, 180, 244, .13) 0%, transparent 42%),
    linear-gradient(145deg, rgba(34, 39, 47, .99) 0%, rgba(21, 24, 30, .995) 74%);
  --ui-card-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 11px 28px rgba(0,0,0,.24),
    0 0 18px rgba(72, 145, 220, .025);
  --ui-card-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,.085),
    0 15px 34px rgba(0,0,0,.31),
    0 0 22px rgba(69, 162, 255, .075);
  --frame-surface: var(--ui-surface);
  --frame-surface-deep: var(--ui-surface-deep);
  --frame-line: var(--ui-border);
  --frame-line-hover: var(--ui-border-hover);
  --frame-fill: var(--ui-card-fill);
  --frame-fill-hover: var(--ui-card-fill-hover);
  --frame-bg: var(--ui-card-fill);
  --frame-bg-hover: var(--ui-card-fill-hover);
  --bg-card: var(--ui-surface);
  --bg-card2: var(--ui-surface-raised);
  --border: var(--ui-border);
  --border2: rgba(138, 184, 230, .2);
}

/* The shared UI layer already uses the variables above. These selectors also
   catch older page-local hard-coded purple surfaces loaded later. */
body:not(.theme-light):not(.adm-body) .page-content :where(
  .hd-profile-card, .hd-desc-card, .hd-stat-card,
  .about-strip, .about-card,
  .tp3-wrap, .tp3-head-right, .tp3-feat,
  .ann-section, .ann-card,
  .sp-section-header, .sp-card,
  .pd-panel, .pd-purchase-panel, .pd-pkg-card, .pd-section,
  .topup-section, .topup-pkg,
  .ord2-row-card, .hv3-stat, .hv3-filterbar, .hv3-panel,
  .wt-stat, .wt-card, .wt-qa,
  .rk-section, .rk-my-pos,
  .ct2-info-card, .ct2-form-card, .ct2-ch-card,
  .comment-form, .comment-item,
  .dl-card, .blog-card,
  .home-monthly-topup-card,
  .home-contact-ticker .hct-item
) {
  background: var(--ui-card-fill) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-card-shadow) !important;
}

body:not(.theme-light):not(.adm-body) .page-content :where(
  .hd-stat-card, .about-card, .tp3-feat, .sp-card, .pd-pkg-card,
  .topup-pkg, .ord2-row-card, .wt-card, .ct2-ch-card, .dl-card, .blog-card
):hover {
  background: var(--ui-card-fill-hover) !important;
  border-color: var(--ui-border-hover) !important;
  box-shadow: var(--ui-card-shadow-hover) !important;
}

/* Neutralize the former violet wash in the large public sections while
   preserving functional accent colors for icons/statuses/buttons. */
body:not(.theme-light):not(.adm-body) :where(.tp3-wrap, .about-strip, .ann-section, .topup-section, .pd-panel, .pd-purchase-panel) {
  background:
    radial-gradient(120% 110% at 10% 0%, rgba(120, 168, 213, .075), transparent 42%),
    linear-gradient(145deg, rgba(28, 32, 39, .985), rgba(17, 20, 25, .995)) !important;
}

body:not(.theme-light):not(.adm-body) :where(.hd-stat-card, .tp3-feat, .sp-card-stats, .pd-stat-row, .topup-pkg) {
  border-color: rgba(162, 193, 224, .13) !important;
}

@media (max-width: 680px) {
  body:not(.theme-light):not(.adm-body) {
    --ui-card-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 7px 18px rgba(0,0,0,.19);
  }
}