/* DIAMOND visual refresh — design-only overrides; compiled app and API logic remain untouched. */
:root {
  --ink: #101a36;
  --muted: #6d7896;
  --surface: #ffffff;
  --canvas: #f4f7ff;
  --primary: #4d5cff;
  --primary-deep: #2737bb;
  --cyan: #36d6d0;
  --line: rgba(44, 61, 125, .10);
  --shadow: 0 18px 45px rgba(40, 55, 130, .12);
}

html, body, uni-app, uni-page, uni-page-wrapper, uni-page-body { background: var(--canvas) !important; color: var(--ink); }
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
uni-page-body { min-height: 100vh !important; }
.container { background: linear-gradient(180deg, #f7f9ff 0%, #f4f7ff 46%, #eef2ff 100%) !important; padding-bottom: 92px !important; overflow: hidden; }

/* Hero: replace the fragile blank-image appearance with a resilient branded panel. */
.head-warp { height: 250px !important; padding: 0 16px 22px !important; background: linear-gradient(135deg, #17245b 0%, #3d46cd 52%, #29bfc8 150%) !important; border-radius: 0 0 32px 32px !important; box-shadow: 0 22px 46px rgba(31, 44, 133, .25) !important; position: relative; overflow: hidden; }
.head-warp::before { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -80px; border-radius: 50%; background: rgba(121, 250, 238, .18); }
.head-warp::after { content: "DIAMOND  /  SMARTER FINANCE"; position: absolute; left: 22px; bottom: 30px; color: rgba(255,255,255,.94); font-size: 18px; letter-spacing: .08em; font-weight: 800; }
.head-video, .head-video .van-swipe-item, .head-video uni-swiper { height: 100% !important; min-height: 205px !important; background: transparent !important; }
.head-video uni-image, .head-video uni-image > div, .head-video uni-image img { opacity: 0 !important; }
.service-logo { top: 18px !important; right: 18px !important; z-index: 12; width: 42px !important; height: 42px !important; padding: 7px !important; border-radius: 15px !important; background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.25) !important; box-shadow: 0 8px 20px rgba(9,15,68,.18) !important; }
.service-logo img { width: 100% !important; height: 100% !important; object-fit: contain; filter: brightness(0) invert(1); }

.home-mid { margin: -22px 14px 0 !important; padding: 10px 7px !important; display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 6px; position: relative; z-index: 4; background: rgba(255,255,255,.96) !important; border: 1px solid rgba(255,255,255,.8) !important; border-radius: 22px !important; box-shadow: var(--shadow) !important; }
.home-mid-item { min-width: 0 !important; padding: 10px 3px 8px !important; border-radius: 16px !important; transition: transform .18s ease, background .18s ease; }
.home-mid-item:active { transform: scale(.96); background: #f0f3ff !important; }
.home-mid-item image, .home-mid-item uni-image { width: 38px !important; height: 38px !important; margin: 0 auto 6px !important; }
.home-mid-item text, .home-mid-item uni-text, .home-mid-item span { color: var(--ink) !important; font-size: 10px !important; font-weight: 700 !important; }

.mid-box { margin: 22px 14px 0 !important; padding: 16px 9px !important; background: var(--surface) !important; border-radius: 22px !important; box-shadow: 0 10px 32px rgba(57, 74, 145, .08) !important; }
.nav-box { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.nav-item { min-width: 0 !important; padding: 4px 2px 2px !important; border-right: 1px solid var(--line) !important; }
.nav-item:last-child { border-right: 0 !important; }
.nav-name, .u-count-num { color: var(--ink) !important; font-weight: 800 !important; }
.u-count-num { color: var(--primary) !important; font-size: 18px !important; }
.nav-name.u-margin-top-26 { color: var(--muted) !important; font-size: 9px !important; line-height: 1.25 !important; }

.goods-list { margin: 18px 14px 0 !important; }
.test-bar.p10 { padding: 0 3px 10px !important; color: var(--ink) !important; font-size: 17px !important; font-weight: 800 !important; }
.test-bar.p10::after { content: "Explore impact-led opportunities"; display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 500; }
.pdf { padding: 0 !important; }
.item { min-height: 116px !important; overflow: hidden; background: var(--surface) !important; border-radius: 22px !important; box-shadow: 0 12px 30px rgba(57, 74, 145, .10) !important; }
.img { width: 37% !important; background: linear-gradient(135deg, #dfe4ff, #b9fbf2) !important; }
.img img { opacity: 0 !important; }
.desc { padding: 18px 14px !important; }
.dazi { color: var(--ink) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.45 !important; }
.btn { margin-top: 12px !important; padding: 8px 14px !important; border-radius: 12px !important; background: linear-gradient(135deg, var(--primary), #7781ff) !important; color: #fff !important; font-size: 10px !important; font-weight: 800 !important; box-shadow: 0 8px 16px rgba(77, 92, 255, .24) !important; }

.uni-tabbar-bottom { height: 74px !important; padding: 8px 10px max(8px, env(safe-area-inset-bottom)) !important; background: rgba(255,255,255,.96) !important; border: 0 !important; border-top: 1px solid var(--line) !important; box-shadow: 0 -12px 30px rgba(32, 47, 112, .10) !important; backdrop-filter: blur(18px); }
.uni-tabbar-bottom .uni-tabbar__item { border-radius: 16px !important; }
.uni-tabbar-bottom .uni-tabbar__label { color: #8992ad !important; font-size: 10px !important; font-weight: 700 !important; }
.uni-tabbar-bottom .uni-tabbar__item.uni-tabbar__item--active .uni-tabbar__label { color: var(--primary) !important; }

@media (min-width: 520px) { .container { max-width: 480px !important; margin: 0 auto; box-shadow: 0 0 60px rgba(20, 34, 100, .10); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }