/* Public storefront layout. Loaded last; scope excludes standalone auth/admin. */
html.site-pearl body.public-ui {
  --sidebar-w: 236px;
  --topbar-h: 60px;
  --ui-gap: 16px;
  --ui-ink: #182b48;
  --ui-subtle: #61728a;
  --ui-blue: #2563d9;
  --ui-line: #dfe7f1;
  --ui-shadow: 0 4px 20px #243f6508;
  background: #f4f7fb !important;
  font-size: 14px;
}
html.site-pearl body.public-ui .pearl-particles { opacity: .22 !important; }
html.site-pearl body.public-ui .page-content { padding: 24px !important; }
html.site-pearl body.public-ui :is(.home-dashboard,.topup-page,.hv3-page,.dl-page,.ct2-page,.blog-page,.ord2-page) {
  width: 100% !important; max-width: 1240px !important; margin-inline: auto !important; min-width: 0;
}
html.site-pearl body.public-ui :is(.topup-page,.hv3-page,.dl-page,.ct2-page,.blog-page) { padding: 0 !important; }
html.site-pearl body.public-ui :is(.topup-title,.hv3-title,.blog-hero-title) {
  font-size: clamp(23px,2.1vw,30px) !important; letter-spacing: -.7px !important; line-height: 1.25 !important;
}
html.site-pearl body.public-ui :is(h1,h2,h3,.blog-hero-title,.ct2-form-title,.hd-stat-val,.topup-pkg-amount) { text-shadow: none !important; -webkit-text-stroke: 0 !important; }
html.site-pearl body.public-ui :is(button,a,input,textarea,select,[role="button"]) { -webkit-tap-highlight-color: transparent; }
html.site-pearl body.public-ui :is(button,a,input,textarea,select,[role="button"]):focus-visible {
  outline: 3px solid #82adf3 !important; outline-offset: 3px !important;
}
html.site-pearl body.public-ui .ui-icon { display: inline-flex !important; align-items: center; justify-content: center; width: 1em; height: 1em; line-height: 1; vertical-align: -.12em; flex-shrink: 0; }
html.site-pearl body.public-ui .ui-icon::before { display: none !important; content: none !important; }
html.site-pearl body.public-ui .ui-icon > svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* A compact, readable navigation with a distinct account area. */
html.site-pearl body.public-ui #sidebar.sidebar { background: #fff !important; border-right: 1px solid var(--ui-line) !important; box-shadow: 3px 0 24px #243f6505 !important; }
html.site-pearl body.public-ui #sidebar .sb-brand-area { padding: 16px 16px 12px !important; }
html.site-pearl body.public-ui #sidebar .sb-logo-stage { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; padding: 0 !important; border-radius: 13px !important; background: #f7f9fc !important; border: 1px solid #e6ecf4 !important; box-shadow: none !important; }
html.site-pearl body.public-ui #sidebar .sb-logo-stage .sb-logo-main { display: block !important; position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; margin: 0 !important; border-radius: 12px !important; }
html.site-pearl body.public-ui #sidebar :is(.sb-logo-aura,.sb-logo-particles) { display: none !important; }
html.site-pearl body.public-ui #sidebar .sb-navigation { margin: 0 10px 12px !important; padding: 0 4px 8px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html.site-pearl body.public-ui #sidebar .sb-navigation-heading { color: #8a98ab !important; border-color: #edf1f6 !important; font-size: 10px !important; padding: 10px 8px !important; letter-spacing: 1px !important; }
html.site-pearl body.public-ui #sidebar :is(.sb-section-index,.sb-navigation-detail) { display: none !important; }
html.site-pearl body.public-ui #sidebar .sb-section-label { font-size: 10px !important; padding: 11px 10px 6px !important; letter-spacing: .7px !important; }
html.site-pearl body.public-ui #sidebar .sb-nav { gap: 4px !important; }
html.site-pearl body.public-ui #sidebar .sb-item { min-height: 44px !important; padding: 7px 10px !important; border: 1px solid transparent !important; border-radius: 11px !important; gap: 10px !important; color: #586b85 !important; background: transparent !important; box-shadow: none !important; transform: none !important; }
html.site-pearl body.public-ui #sidebar .sb-item::before { display: none !important; }
html.site-pearl body.public-ui #sidebar .sb-item-icon { width: 30px !important; height: 30px !important; border: 0 !important; border-radius: 9px !important; background: #f0f4f9 !important; box-shadow: none !important; color: #607592 !important; }
html.site-pearl body.public-ui #sidebar .sb-item-icon > i { font-size: 17px !important; }
html.site-pearl body.public-ui #sidebar .sb-item-text { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
html.site-pearl body.public-ui #sidebar .sb-item.sb-active { background: #edf4ff !important; border-color: #dce9ff !important; color: #225ac0 !important; }
html.site-pearl body.public-ui #sidebar .sb-active .sb-item-icon { background: #2563d9 !important; color: #fff !important; }
html.site-pearl body.public-ui #sidebar .sb-item:hover { background: #f4f7fb !important; }
html.site-pearl body.public-ui #sidebar .sb-auth-area { padding: 12px 14px 16px !important; border-top: 1px solid #edf1f6 !important; background: #fff !important; }
html.site-pearl body.public-ui #sidebar .sb-user-row { margin: 0 0 10px !important; padding: 10px !important; min-width: 0; background: #f7f9fc !important; border: 1px solid #e6ecf4 !important; border-radius: 13px !important; gap: 10px !important; box-shadow: none !important; }
html.site-pearl body.public-ui #sidebar .sb-user-avatar { width: 36px !important; height: 36px !important; border-radius: 12px !important; flex-shrink: 0; background: linear-gradient(135deg,#467fe8,#6b5bd3) !important; box-shadow: none !important; color: #fff !important; }
html.site-pearl body.public-ui #sidebar .sb-user-info { flex: 1; min-width: 0; }
html.site-pearl body.public-ui #sidebar :is(.sb-user-name,.sb-user-email) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
html.site-pearl body.public-ui #sidebar .sb-user-name { color: #203653 !important; font-size: 13px !important; font-weight: 750 !important; line-height: 1.5; background: none !important; -webkit-text-fill-color: #203653 !important; text-shadow: none !important; }
html.site-pearl body.public-ui #sidebar .sb-user-email { color: #6d7d92 !important; font-size: 11px !important; line-height: 1.5; }
html.site-pearl body.public-ui #sidebar .sb-vip-promo { display: flex !important; align-items: center; gap: 9px !important; padding: 11px !important; margin: 0 0 10px !important; min-height: 42px; border: 1px solid #f0dfb4 !important; background: linear-gradient(110deg,#fff9e9,#fffdf6) !important; border-radius: 11px !important; color: #936519 !important; box-shadow: none !important; }
html.site-pearl body.public-ui #sidebar .sb-vip-promo > i:first-child { font-size: 17px !important; color: #ba841e !important; }
html.site-pearl body.public-ui #sidebar .sb-vip-promo span { font-size: 11px !important; font-weight: 650 !important; color: #8b641c !important; }
html.site-pearl body.public-ui #sidebar .sb-vip-promo b { color: #9a6111 !important; background: linear-gradient(100deg,#9a6111 20%,#db9f22 45%,#a26310 70%); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: public-vip-sheen 5s ease-in-out infinite; }
@keyframes public-vip-sheen { 0%,100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
html.site-pearl body.public-ui #sidebar .sb-vip-card { margin: 0 0 10px !important; padding: 12px !important; border-radius: 12px !important; box-shadow: none !important; }
html.site-pearl body.public-ui #sidebar .sb-vip-card .sb-vip-label { color: #876b4b !important; }
html.site-pearl body.public-ui #sidebar .sb-vip-card .sb-vip-progress-txt { color: #876b4b !important; }
html.site-pearl body.public-ui #sidebar .sb-balance-card { display: flex !important; align-items: center; gap: 10px !important; padding: 12px !important; margin: 0 0 10px !important; border: 1px solid #d7e7fd !important; background: #f0f6ff !important; border-radius: 12px !important; min-width: 0; box-shadow: none !important; }
html.site-pearl body.public-ui #sidebar .sb-balance-card > i { width: 28px; height: 28px; padding: 5px; color: #2563d9 !important; background: #deebff; border-radius: 8px; }
html.site-pearl body.public-ui #sidebar .sb-balance-card > div { flex: 1; min-width: 0; }
html.site-pearl body.public-ui #sidebar .sb-balance-title { font-size: 10px !important; letter-spacing: .3px !important; text-transform: none !important; color: #647a99 !important; }
html.site-pearl body.public-ui #sidebar .sb-balance-value { font-size: 17px !important; font-weight: 800 !important; letter-spacing: -.4px; color: #214b8c !important; overflow-wrap: anywhere; }
html.site-pearl body.public-ui #sidebar .sb-balance-add { display: grid; place-items: center; width: 32px; height: 36px; flex: none; border-radius: 9px; background: #fff; border: 1px solid #d6e5fc; color: #2563d9 !important; }
html.site-pearl body.public-ui #sidebar .sb-btn { min-height: 42px !important; border-radius: 10px !important; padding: 10px !important; font-size: 12px !important; gap: 9px !important; box-shadow: none !important; }
html.site-pearl body.public-ui #sidebar .sb-btn-logout { color: #667990 !important; background: #fff !important; border: 1px solid #e3eaf3 !important; }
html.site-pearl body.public-ui #topbar.topbar { height: var(--topbar-h) !important; background: #ffffffed !important; border-bottom: 1px solid #e3eaf3 !important; box-shadow: none !important; padding: 0 24px !important; gap: 12px; }
html.site-pearl body.public-ui .topbar-search-wrap { max-width: 460px !important; width: 100%; }
html.site-pearl body.public-ui .topbar-search { min-height: 38px !important; border-radius: 11px !important; background: #f4f7fb !important; box-shadow: none !important; }

/* Home: profile and ranking share a row instead of leaving an empty stage. */
html.site-pearl body.public-ui .home-overview { display: grid; gap: 14px; margin: 0 0 18px; align-items: stretch; }
html.site-pearl body.public-ui .home-dashboard { display: block !important; padding-top: 0 !important; }
html.site-pearl body.public-ui .home-overview--ranked { grid-template-columns: minmax(0,1fr) minmax(270px,330px); }
html.site-pearl body.public-ui .home-dashboard .hd-profile-card { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-content: center; align-items: center; gap: 18px 12px !important; min-height: 152px !important; padding: 22px !important; margin: 0 !important; border: 1px solid #dce6f3 !important; border-radius: 18px !important; background: linear-gradient(115deg,#fff 25%,#f0f6ff) !important; box-shadow: var(--ui-shadow) !important; }
html.site-pearl body.public-ui .home-dashboard .hd-profile-card::before { display: none !important; }
html.site-pearl body.public-ui .home-dashboard .hd-profile-left { min-width: 0; gap: 13px !important; }
html.site-pearl body.public-ui .home-dashboard .hd-avatar { width: 48px !important; height: 48px !important; flex-shrink: 0; border-radius: 14px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .home-dashboard .hd-avatar-img { border-radius: 13px !important; }
html.site-pearl body.public-ui .home-dashboard .hd-profile-info { min-width: 0; }
html.site-pearl body.public-ui .home-dashboard .hd-service-name { gap: 7px !important; font-size: 20px !important; }
html.site-pearl body.public-ui .home-dashboard .hd-brand-signature { font-size: clamp(18px,1.7vw,24px) !important; line-height: 1.3 !important; letter-spacing: -.6px !important; overflow-wrap: anywhere; }
html.site-pearl body.public-ui .home-dashboard .hd-profile-date { font-size: 11px !important; padding: 3px 0 !important; background: none !important; border: 0 !important; color: #71819a !important; }
html.site-pearl body.public-ui .home-profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; grid-column: 1/-1; grid-row: 2; }
html.site-pearl body.public-ui .home-quick-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; min-height: 40px; border: 1px solid #2563d9; border-radius: 10px; background: #2563d9; color: #fff !important; text-decoration: none; font-size: 12px; font-weight: 650; transition: transform .18s,box-shadow .18s; }
html.site-pearl body.public-ui .home-quick-link--soft { background: #fff !important; border-color: #d9e4f4 !important; color: #526d92 !important; }
html.site-pearl body.public-ui .home-quick-link:hover { transform: translateY(-2px); box-shadow: 0 5px 12px #2563d91c; }
html.site-pearl body.public-ui .home-dashboard .hd-profile-badges { grid-row: 1; grid-column: 2; margin: 0 !important; }
html.site-pearl body.public-ui .home-monthly-topup-row { display: flex !important; margin: 0 !important; min-width: 0; }
html.site-pearl body.public-ui .home-monthly-topup-row .hmt-card { width: 100% !important; margin: 0 !important; border-radius: 17px !important; border: 1px solid var(--ui-line) !important; box-shadow: var(--ui-shadow) !important; }
html.site-pearl body.public-ui .hmt-head { padding: 13px 14px !important; }
html.site-pearl body.public-ui .hmt-title { font-size: 11px !important; }
html.site-pearl body.public-ui .hmt-item { padding: 8px 12px !important; gap: 8px !important; }
html.site-pearl body.public-ui .hmt-empty { padding: 18px 14px !important; min-height: 72px !important; border: 0 !important; border-radius: 0 !important; gap: 10px; font-size: 11px !important; }
html.site-pearl body.public-ui .hmt-foot { padding: 8px 12px !important; font-size: 9px !important; }
html.site-pearl body.public-ui .home-contact-ticker { margin-bottom: 18px !important; }
html.site-pearl body.public-ui .home-contact-ticker .hct-item { min-height: 48px !important; border-radius: 12px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .about-strip { padding: 16px !important; border-radius: 17px !important; margin-bottom: 18px !important; }
html.site-pearl body.public-ui .about-cards-row { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 10px !important; }
html.site-pearl body.public-ui .about-card { padding: 13px !important; border-radius: 12px !important; background: #f8fafd !important; box-shadow: none !important; }
html.site-pearl body.public-ui .about-card-title { font-size: 13px !important; }
html.site-pearl body.public-ui .about-card-desc { font-size: 12px !important; line-height: 1.55 !important; color: #61728a !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap { padding: 16px !important; margin: 0 0 18px !important; border-radius: 18px !important; box-shadow: var(--ui-shadow) !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-head { margin-bottom: 12px !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-head-title { font-size: 15px !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-cards { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-cards .tp3-card { display: flex !important; flex-direction: column !important; height: 190px !important; min-height: 0 !important; padding: 0 !important; border-radius: 13px !important; border: 1px solid #dce6f3 !important; background: #070b14 !important; overflow: hidden !important; box-shadow: none !important; cursor: pointer; transition: transform .2s,box-shadow .2s !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-cards .tp3-card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 20px #223d651c !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-cards .tp3-card { width: 100% !important; min-width: 0 !important; max-width: none !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-card img.tp3-card-image-v42 { min-height: 0 !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-card .tp3-card-name { padding: 0 !important; background: transparent !important; border: 0 !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-card .tp3-card-content { max-width: none !important; flex: 0 0 auto !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-card .tp3-card-content { visibility: visible !important; opacity: 1 !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-cards .tp3-card { height: auto !important; aspect-ratio: auto !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-card .tp3-artwork-v42 { height: auto !important; flex: none !important; aspect-ratio: auto !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-card img.tp3-card-image-v42 { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: contain !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-card .tp3-artwork-v42 { position: relative !important; inset: auto !important; flex: 1 !important; width: 100% !important; height: 0 !important; min-height: 0 !important; display: block !important; background: #050911 !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-card .tp3-card-content { position: relative !important; inset: auto !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 11px 14px !important; min-height: 42px !important; background: #fff !important; z-index: 3 !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-card .tp3-card-content::after { content: '→'; color: #2563d9; font-size: 19px; line-height: 1; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-card .tp3-card-name { display: block !important; font-size: 13px !important; color: #243c5b !important; text-shadow: none !important; letter-spacing: 0 !important; margin: 0 !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-features { margin-top: 10px !important; gap: 8px !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-feat { padding: 8px !important; min-height: 34px !important; background: #f6f9fd !important; border-radius: 8px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-feat-title { font-size: 10px !important; }
html.site-pearl body.public-ui .home-dashboard .hd-stats-row { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 12px !important; margin: 0 0 20px !important; }
html.site-pearl body.public-ui .home-dashboard .hd-stat-card { display: flex !important; align-items: center !important; gap: 12px !important; padding: 16px !important; min-height: 82px !important; border: 1px solid var(--ui-line) !important; border-radius: 15px !important; box-shadow: var(--ui-shadow) !important; }
html.site-pearl body.public-ui .home-dashboard :is(.hd-stat-crown,.hd-stat-cat-wrap) { display: none !important; }
html.site-pearl body.public-ui .home-dashboard .hd-stat-icon { width: 38px !important; height: 38px !important; border-radius: 11px !important; background: #edf3ff !important; color: #4271bd !important; border: 0 !important; box-shadow: none !important; font-size: 18px !important; }
html.site-pearl body.public-ui .home-dashboard .hd-stat-body { min-width: 0; }
html.site-pearl body.public-ui .home-dashboard .hd-stat-val { font-size: 19px !important; letter-spacing: -.6px !important; line-height: 1.3 !important; overflow-wrap: anywhere; }
html.site-pearl body.public-ui .home-dashboard .hd-stat-lbl { font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; margin-top: 3px !important; }
html.site-pearl body.public-ui .home-dashboard .hd-stat-action { width: 32px !important; height: 36px !important; position: static !important; margin-left: auto; flex-shrink: 0; background: #f1f6ff !important; color: #2563d9 !important; border: 1px solid #dfebff !important; border-radius: 9px !important; }
html.site-pearl body.public-ui .home-dashboard .sp-main-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 16px !important; }
html.site-pearl body.public-ui .home-dashboard .sp-card .sp-card-media { max-height: 190px !important; }
html.site-pearl body.public-ui .home-dashboard .sp-category-tabs { gap: 8px !important; margin-bottom: 16px !important; }

html.site-pearl body.public-ui .home-dashboard .home-hero { margin-bottom: 18px !important; }
html.site-pearl body.public-ui .home-dashboard .home-hero__viewport { min-height: 250px !important; border-radius: 18px !important; box-shadow: var(--ui-shadow) !important; }
html.site-pearl body.public-ui .home-dashboard .home-hero__content { width: min(680px,70%) !important; padding: 28px 38px !important; }
html.site-pearl body.public-ui .home-dashboard .home-hero__title { font-size: clamp(26px,2.7vw,38px) !important; line-height: 1.12 !important; }
html.site-pearl body.public-ui .home-dashboard .home-hero__subtitle { font-size: 15px !important; }
html.site-pearl body.public-ui .home-dashboard .home-hero__desc { font-size: 12px !important; line-height: 1.6 !important; }
html.site-pearl body.public-ui .home-dashboard .home-hero__actions:empty { display: none !important; }
html.site-pearl body.public-ui .home-dashboard .home-contact-ticker .hct-item { background: #fff !important; border: 1px solid #dfe7f2 !important; }
html.site-pearl body.public-ui .home-dashboard .home-contact-ticker .hct-text strong { color: #3a5477 !important; }
html.site-pearl body.public-ui .home-dashboard .home-contact-ticker .hct-text small { color: #74859c !important; }
html.site-pearl body.public-ui .home-dashboard .home-contact-ticker .hct-icon { box-shadow: none !important; border: 1px solid #e2eaf5 !important; }
html.site-pearl body.public-ui .home-dashboard .home-contact-ticker { margin: 0 0 16px !important; padding: 0 !important; }
html.site-pearl body.public-ui .home-dashboard .home-contact-ticker :is(.hct-shell,.hct-marquee) { padding-block: 3px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap { background: #fff !important; border: 1px solid #dfe7f1 !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-main-title { color: #304b70 !important; font-size: 15px !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-head-right { background: #f7f9fd !important; border-color: #e3eaf4 !important; box-shadow: none !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-hr-title { color: #617894 !important; }
html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-head-icon { background: #edf6f2 !important; color: #4c8b70 !important; border: 0 !important; box-shadow: none !important; }
html.site-pearl body.public-ui .home-dashboard :is(.hmt-foot,.hmt-foot span) { color: #8192a9 !important; }
html.site-pearl body.public-ui .home-dashboard .vip-badge-member { color: #7b8fa8 !important; background: #eaf1fa !important; border-color: #dce6f4 !important; }

/* Top-up: choices on the left, clear payment summary on the right. */
html.site-pearl body.public-ui .topup-header { display: flex !important; gap: 14px !important; margin-bottom: 22px !important; padding: 0 !important; }
html.site-pearl body.public-ui .topup-header > div:nth-child(2) { flex: 1; min-width: 0; width: auto !important; }
html.site-pearl body.public-ui .topup-header-icon { width: 48px !important; height: 48px !important; border-radius: 14px !important; background: #e8f0ff !important; color: #2563d9 !important; box-shadow: none !important; font-size: 23px !important; }
html.site-pearl body.public-ui .topup-sub { font-size: 13px !important; line-height: 1.55 !important; color: #61728a !important; margin-top: 6px !important; }
html.site-pearl body.public-ui .topup-balance-pill { border-radius: 13px !important; padding: 10px 14px !important; background: #fff !important; border: 1px solid #dce7f7 !important; box-shadow: var(--ui-shadow) !important; min-width: 160px !important; }
html.site-pearl body.public-ui .topup-bal-value { font-size: 18px !important; letter-spacing: -.5px !important; color: #2354a1 !important; }
html.site-pearl body.public-ui .topup-tabs { display: flex !important; gap: 5px !important; width: max-content !important; max-width: 100%; padding: 5px !important; margin: 0 0 18px !important; background: #e9eff7 !important; border: 1px solid #e1e8f3 !important; border-radius: 13px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .topup-tab { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 11px 20px !important; min-height: 42px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: #60728c !important; font-size: 13px !important; font-weight: 650 !important; box-shadow: none !important; }
html.site-pearl body.public-ui .topup-tab.tab-on { color: #245bc0 !important; background: #fff !important; box-shadow: 0 2px 5px #2544740d !important; }
html.site-pearl body.public-ui .topup-tab::after { display: none !important; }
html.site-pearl body.public-ui .topup-workspace { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: start; gap: 16px; }
html.site-pearl body.public-ui .topup-workspace > .topup-section { margin: 0 !important; padding: 20px !important; border-radius: 17px !important; border: 1px solid var(--ui-line) !important; box-shadow: var(--ui-shadow) !important; min-width: 0; }
html.site-pearl body.public-ui .topup-workspace > .topup-section:nth-child(2) { grid-column: 1; }
html.site-pearl body.public-ui .topup-workspace > .topup-section:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
html.site-pearl body.public-ui .topup-section-title { display: flex; align-items: center; gap: 9px; font-size: 13px !important; color: #2c4261 !important; text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 16px !important; padding: 0 !important; border: 0 !important; }
html.site-pearl body.public-ui .topup-section-title > i { color: #4977c5 !important; font-size: 17px !important; }
html.site-pearl body.public-ui .topup-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 10px !important; }
html.site-pearl body.public-ui .topup-pkg { min-height: 86px !important; padding: 16px 8px 12px !important; border-radius: 12px !important; background: #f9fbfe !important; border: 1px solid #dce5f2 !important; box-shadow: none !important; transform: none !important; overflow: hidden; }
html.site-pearl body.public-ui .topup-pkg-icon { display: none !important; }
html.site-pearl body.public-ui .topup-pkg-amount { font-size: 16px !important; line-height: 1.45 !important; letter-spacing: -.4px !important; color: #2a425f !important; }
html.site-pearl body.public-ui .topup-pkg-bonus { font-size: 10px !important; color: #6a7c95 !important; }
html.site-pearl body.public-ui .topup-pkg-ribbon { top: 0 !important; right: 0 !important; left: auto !important; padding: 3px 7px !important; font-size: 8px !important; border-radius: 0 0 0 7px !important; transform: none !important; background: #e3edff !important; color: #3966ab !important; box-shadow: none !important; width: auto !important; }
html.site-pearl body.public-ui :is(.topup-pkg.selected,.tc-amount-btn.selected) { background: #effaf3 !important; border-color: #39a568 !important; box-shadow: 0 0 0 2px #15803d0d !important; color: #15803d !important; }
html.site-pearl body.public-ui .topup-pkg.selected .topup-pkg-amount { color: #15803d !important; }
html.site-pearl body.public-ui .topup-pkg::after { display: none !important; }
html.site-pearl body.public-ui .topup-pkg.selected::after { display: grid !important; place-items: center; content: '✓' !important; position: absolute; top: 6px; left: 6px; width: 15px; height: 15px; border-radius: 50%; background: #15803d !important; color: #fff !important; font-size: 10px; transform: none !important; opacity: 1 !important; }
html.site-pearl body.public-ui .topup-custom-wrap { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
html.site-pearl body.public-ui :is(.topup-input,.tc-input,.ct2-input) { height: 46px !important; border: 1px solid #dce5f1 !important; border-radius: 10px !important; background: #f8fafd !important; color: #263d5a !important; font-size: 14px !important; box-shadow: none !important; }
html.site-pearl body.public-ui :is(.topup-input,.tc-input,.ct2-input):focus { border-color: #82adf3 !important; background: #fff !important; box-shadow: 0 0 0 3px #2563d90c !important; }
html.site-pearl body.public-ui :is(.topup-input,.tc-input,.ct2-input)::placeholder { color: #8593a7 !important; }
html.site-pearl body.public-ui .topup-input-hint { min-height: 16px; font-size: 12px !important; }
html.site-pearl body.public-ui .bank-badge { padding: 13px !important; border-radius: 12px !important; background: #f3f7fe !important; border-color: #e1eafb !important; gap: 10px !important; }
html.site-pearl body.public-ui .bank-badge-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: #e3edff !important; color: #3066bc !important; font-size: 19px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .bank-badge-name { font-size: 13px !important; line-height: 1.5 !important; color: #2c476b !important; }
html.site-pearl body.public-ui .bank-badge-sub { font-size: 11px !important; line-height: 1.6 !important; color: #617b9d !important; overflow-wrap: anywhere; }
html.site-pearl body.public-ui .bank-notice { padding: 12px 0 !important; background: none !important; border: 0 !important; margin: 0 !important; }
html.site-pearl body.public-ui .bank-notice-text { color: #6a7b92 !important; font-size: 12px !important; line-height: 1.8 !important; }
html.site-pearl body.public-ui .topup-summary { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 16px; padding: 16px 0; border-top: 1px dashed #d8e3f2; border-bottom: 1px dashed #d8e3f2; }
html.site-pearl body.public-ui .topup-summary span { color: #7b8ca3; font-size: 12px; }
html.site-pearl body.public-ui .topup-summary strong { color: #244e89; font-size: 22px; font-weight: 750; letter-spacing: -.6px; }
html.site-pearl body.public-ui .topup-confirm-wrap { margin: 0 !important; padding: 0 !important; }
html.site-pearl body.public-ui :is(.topup-confirm-btn,.tc-submit-btn,.ct2-submit) { min-height: 46px !important; border-radius: 11px !important; background: #2563d9 !important; border: 1px solid #2563d9 !important; color: #fff !important; font-size: 13px !important; font-weight: 650 !important; box-shadow: 0 4px 9px #2563d915 !important; transition: background .18s,transform .18s !important; letter-spacing: 0 !important; }
html.site-pearl body.public-ui :is(.topup-confirm-btn,.tc-submit-btn):disabled { background: #e9eef5 !important; border-color: #e4eaf3 !important; color: #8492a7 !important; opacity: 1 !important; box-shadow: none !important; cursor: not-allowed !important; }
html.site-pearl body.public-ui .topup-confirm-amount { display: none !important; }
html.site-pearl body.public-ui .tc-telco-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 10px !important; }
html.site-pearl body.public-ui .tc-telco { min-height: 0 !important; height: 82px !important; border-radius: 11px !important; border: 2px solid transparent !important; background: #f4f7fb !important; box-shadow: none !important; transform: none !important; }
html.site-pearl body.public-ui .tc-telco.selected { border-color: #39a568 !important; box-shadow: 0 0 0 3px #15803d13 !important; }
html.site-pearl body.public-ui .tc-telco-artwork { object-fit: contain !important; }
html.site-pearl body.public-ui .tc-telco-check { background: #15803d !important; color: #fff !important; border-color: #fff !important; }
html.site-pearl body.public-ui .tc-amount-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 8px !important; }
html.site-pearl body.public-ui .tc-amount-btn { min-height: 44px !important; padding: 12px 4px !important; font-size: 12px !important; border: 1px solid #dce5f2 !important; border-radius: 10px !important; box-shadow: none !important; background: #f9fbfe !important; color: #405b80 !important; transform: none !important; }
html.site-pearl body.public-ui .tc-inputs { grid-template-columns: 1fr !important; gap: 16px !important; }
html.site-pearl body.public-ui .tc-label { font-size: 12px !important; color: #546d8c !important; margin-bottom: 7px !important; }
html.site-pearl body.public-ui .tc-submit-btn { margin-top: 18px !important; }
html.site-pearl body.public-ui .tc-note { padding: 12px !important; margin-top: 16px !important; border-radius: 10px !important; background: #fff9ec !important; border: 1px solid #f4e7c9 !important; color: #876d37 !important; font-size: 11px !important; line-height: 1.7 !important; }
html.site-pearl body.public-ui .topup-page .topup-header { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
html.site-pearl body.public-ui .topup-page .topup-tabs { min-height: 0 !important; height: auto !important; margin-top: 0 !important; }
html.site-pearl body.public-ui .topup-page .topup-tab { width: auto !important; flex: 0 1 auto; white-space: nowrap; }
html.site-pearl body.public-ui .topup-page .topup-tab span { white-space: nowrap !important; }
html.site-pearl body.public-ui .topup-page #panel-bank .topup-input-wrap { min-height: 46px !important; border: 1px solid #dce5f1 !important; background: #f8fafd !important; border-radius: 10px !important; }
html.site-pearl body.public-ui .topup-page #panel-bank .topup-input-wrap { padding: 0 !important; height: 46px !important; max-height: 46px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .topup-page #panel-bank .topup-input { border: 0 !important; min-height: 44px !important; height: 44px !important; background: transparent !important; padding: 10px !important; }
html.site-pearl body.public-ui .topup-page #panel-bank .topup-input-wrap .ti-icon { color: #6482a9 !important; border: 0 !important; background: #edf3fc !important; }
html.site-pearl body.public-ui .topup-page #panel-bank .bank-notice-text { border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }
html.site-pearl body.public-ui .topup-page #panel-bank .bank-notice { box-shadow: none !important; border-radius: 0 !important; }
html.site-pearl body.public-ui .topup-page :is(#panel-card,#panel-bank) :is(.topup-confirm-btn,.tc-submit-btn) { width: 100% !important; max-width: none !important; clip-path: none !important; text-shadow: none !important; text-transform: none !important; padding: 12px !important; }
html.site-pearl body.public-ui .topup-page :is(#panel-card,#panel-bank) :is(.topup-confirm-btn,.tc-submit-btn)::before,
html.site-pearl body.public-ui .topup-page :is(#panel-card,#panel-bank) :is(.topup-confirm-btn,.tc-submit-btn)::after { display: none !important; content: none !important; }
html.site-pearl body.public-ui .topup-page #panel-card .tc-input-group { padding: 0 !important; background: transparent !important; border: 0 !important; min-width: 0 !important; }
html.site-pearl body.public-ui .topup-page #panel-card .tc-input-wrap { background: transparent !important; }
html.site-pearl body.public-ui .topup-page #panel-card .tc-input { width: 100% !important; min-width: 0 !important; }
html.site-pearl body.public-ui .topup-page #panel-card .tc-amount-grid { min-width: 0 !important; }
html.site-pearl body.public-ui .topup-page #panel-card .tc-telco { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
html.site-pearl body.public-ui .topup-page #panel-card .tc-telco-artwork { min-width: 0 !important; max-width: 100% !important; }
html.site-pearl body.public-ui .topup-page :is(#panel-card,#panel-bank) { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html.site-pearl body.public-ui .topup-page .topup-workspace { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html.site-pearl body.public-ui .topup-page #panel-card .tc-telco.tc-telco-image { height: 82px !important; min-height: 0 !important; aspect-ratio: auto !important; border: 2px solid #e0e7f1 !important; background: #fff !important; box-shadow: none !important; }
html.site-pearl body.public-ui .topup-page #panel-card .tc-telco.tc-telco-image > .tc-telco-artwork { object-fit: contain !important; padding: 3px !important; background: #fff !important; }
html.site-pearl body.public-ui .topup-page #panel-card .tc-telco.tc-telco-image.selected { border-color: #39a568 !important; background: #effaf3 !important; box-shadow: 0 0 0 3px #15803d0d !important; }
html.site-pearl body.public-ui .topup-page #panel-card .tc-amount-btn.selected { background: #effaf3 !important; border-color: #39a568 !important; color: #15803d !important; }
html.site-pearl body.public-ui .topup-page #panel-bank .topup-pkg.selected { background: #effaf3 !important; border-color: #39a568 !important; }

/* History: compact stats, readable records, mobile details remain accessible. */
html.site-pearl body.public-ui .hv3-hdr { margin-bottom: 22px !important; }
html.site-pearl body.public-ui .hv3-stats { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 14px !important; margin-bottom: 20px !important; }
html.site-pearl body.public-ui .hv3-stat { padding: 18px !important; min-height: 116px !important; border: 1px solid var(--ui-line) !important; border-radius: 16px !important; box-shadow: var(--ui-shadow) !important; }
html.site-pearl body.public-ui .hv3-stat::before { display: none !important; }
html.site-pearl body.public-ui .hv3-sparkline { display: none !important; }
html.site-pearl body.public-ui .hv3-stat-label { font-size: 12px !important; color: #687c98 !important; }
html.site-pearl body.public-ui .hv3-stat-val { font-size: 25px !important; letter-spacing: -.8px !important; margin-top: 9px !important; color: #254e88 !important; overflow-wrap: anywhere; }
html.site-pearl body.public-ui .hv3-stat-icon { width: 36px !important; height: 36px !important; border-radius: 11px !important; font-size: 17px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .hv3-delta { margin-top: 12px !important; font-size: 11px !important; color: #7c8ca1 !important; }
html.site-pearl body.public-ui .hv3-filterbar { padding: 6px !important; gap: 12px !important; border-radius: 13px !important; margin-bottom: 14px !important; background: #eaf0f7 !important; border: 1px solid #e0e8f3 !important; }
html.site-pearl body.public-ui .hv3-tabs { gap: 5px !important; }
html.site-pearl body.public-ui .hv3-tab { min-height: 40px !important; padding: 10px 14px !important; font-size: 12px !important; border: 0 !important; border-radius: 9px !important; color: #647b99 !important; background: transparent !important; box-shadow: none !important; }
html.site-pearl body.public-ui .hv3-tab:is(.active-green,.active-purple,.active-orange) { background: #fff !important; color: #285eae !important; box-shadow: 0 2px 5px #2544740d !important; }
html.site-pearl body.public-ui .hv3-time-filter { font-size: 11px !important; color: #7488a2 !important; padding-right: 10px !important; }
html.site-pearl body.public-ui .hv3-panel { padding: 0 !important; border: 1px solid var(--ui-line) !important; border-radius: 16px !important; overflow: hidden; box-shadow: var(--ui-shadow) !important; }
html.site-pearl body.public-ui .hv3-table-wrap { padding: 0 !important; overflow: visible !important; min-width: 0 !important; }
html.site-pearl body.public-ui .hv3-thead { padding: 14px 18px !important; font-size: 10px !important; background: #f8fafd !important; color: #8190a5 !important; border-radius: 0 !important; margin: 0 !important; }
html.site-pearl body.public-ui .hv3-row { padding: 15px 18px !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid #edf1f6 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; }
html.site-pearl body.public-ui .hv3-row:last-child { border: 0 !important; }
html.site-pearl body.public-ui .hv3-row:hover { background: #f9fbfe !important; }
html.site-pearl body.public-ui :is(.hv3-row,.hv3-thead) { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1.1fr) !important; gap: 12px !important; }
html.site-pearl body.public-ui .hv3-row > div { min-width: 0; overflow-wrap: anywhere; }
html.site-pearl body.public-ui .hv3-tx-code { font-size: 12px !important; }
html.site-pearl body.public-ui .hv3-tx-sub { font-size: 10px !important; }
html.site-pearl body.public-ui .hv3-col-amt { font-size: 14px !important; letter-spacing: -.3px; }
html.site-pearl body.public-ui .hv3-col-time { font-size: 11px !important; }
html.site-pearl body.public-ui .hv3-page .hv3-tx-sub { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.65 !important; }
html.site-pearl body.public-ui .hv3-page .hv3-tx-code { color: #304e72 !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; }
html.site-pearl body.public-ui .hv3-page :is(.hv3-tx-sub,.hv3-col-time,.hv3-hdr-sub,.hv3-detail-label,.hv3-thead,.hv3-thead > span) { color: #5d7390 !important; -webkit-text-fill-color: currentColor !important; }
html.site-pearl body.public-ui .hv3-page .hv3-col-amt.grey { color: #5e738e !important; -webkit-text-fill-color: currentColor !important; }
html.site-pearl body.public-ui .hv3-page .hv3-col-amt.plus { color: #197143 !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; }
html.site-pearl body.public-ui .hv3-page .hv3-expand-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 36px; background: #f2f6fc !important; color: #5d7390 !important; border: 1px solid #dde7f3 !important; border-radius: 9px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .hv3-page .hv3-panel > .hv3-pagination { padding: 14px 16px !important; background: #f8fafd !important; border-top: 1px solid #e2eaf4 !important; }
html.site-pearl body.public-ui .hv3-page .hv3-per-page { background: transparent !important; color: #5d7390 !important; border: 0 !important; box-shadow: none !important; font-size: 11px !important; }
html.site-pearl body.public-ui .hv3-page .hv3-page-btn { border-radius: 8px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .hv3-page .hv3-page-btn.active { color: #2563d9 !important; background: #eaf1ff !important; border-color: #cadcfa !important; }
html.site-pearl body.public-ui .hv3-page .hv3-status-content { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
html.site-pearl body.public-ui .hv3-page .hv3-status-note { font-size: 10px; color: #5e738e; line-height: 1.55; }
html.site-pearl body.public-ui .hv3-page .hv3-status-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; line-height: 1.5; }
html.site-pearl body.public-ui .hv3-page .hv3-status-badge > i { font-size: 15px !important; }
html.site-pearl body.public-ui .hv3-page .hv3-status-badge.success { background: #ecf9f0 !important; color: #197143 !important; border: 1px solid #ccebd7 !important; }
html.site-pearl body.public-ui .hv3-page .hv3-status-badge.pending { background: #fff8e8 !important; color: #986b1f !important; border: 1px solid #f0e0b5 !important; }
html.site-pearl body.public-ui .hv3-page .hv3-status-badge.error { background: #fff0f1 !important; color: #bb4351 !important; border: 1px solid #f3d5d9 !important; }
html.site-pearl body.public-ui .hv3-page .hv3-status-badge.info { background: #edf4ff !important; color: #496eaa !important; border: 1px solid #d7e5fb !important; }
html.site-pearl body.public-ui .hv3-page .hv3-status-badge.success > i { animation: public-payment-confirm .35s ease-out both; }
@keyframes public-payment-confirm { from { transform: scale(.7); opacity: .3; } to { transform: scale(1); opacity: 1; } }
html.site-pearl body.public-ui :is(.hv3-type-badge,.hv3-status-badge) { padding: 5px 8px !important; font-size: 10px !important; border-radius: 7px !important; white-space: normal !important; }
html.site-pearl body.public-ui .hv3-empty { padding: 52px 20px !important; font-size: 13px !important; }
html.site-pearl body.public-ui .hv3-empty > i { font-size: 31px !important; color: #8aa8ce !important; }
html.site-pearl body.public-ui .hv3-detail { padding: 16px !important; border-radius: 0 !important; background: #f7faff !important; box-shadow: none !important; }
html.site-pearl body.public-ui .hv3-detail-grid { gap: 12px !important; }
html.site-pearl body.public-ui .hv3-page .hv3-hdr { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html.site-pearl body.public-ui .hv3-page .hv3-hdr-icon { background: #e8f0ff !important; color: #2563d9 !important; border: 0 !important; border-radius: 13px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .hv3-page .hv3-refresh-btn { background: #fff !important; border: 1px solid #dfe7f1 !important; border-radius: 10px !important; color: #627e9f !important; min-height: 40px; box-shadow: none !important; }
html.site-pearl body.public-ui .hv3-page .hv3-tabs { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html.site-pearl body.public-ui .hv3-page .hv3-time-filter { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html.site-pearl body.public-ui .hv3-page .hv3-filterbar { box-shadow: none !important; }
html.site-pearl body.public-ui .hv3-page .hv3-empty p { color: #8293ab !important; }

/* Downloads and news use the same card rhythm as the shop. */
html.site-pearl body.public-ui .dlhero { max-width: 1240px; margin: 0 auto 22px !important; padding: 24px !important; border-radius: 18px !important; border: 1px solid #dce7f7 !important; background: linear-gradient(115deg,#fff,#edf4ff) !important; min-height: 0 !important; overflow: hidden; }
html.site-pearl body.public-ui :is(.dlhero-bg,.dlhero-orb,.dlhero-grid) { display: none !important; }
html.site-pearl body.public-ui .dlhero-inner { padding: 0 !important; gap: 30px !important; }
html.site-pearl body.public-ui .dlhero-title { font-size: 32px !important; line-height: 1.25 !important; letter-spacing: -1px !important; margin: 9px 0 !important; }
html.site-pearl body.public-ui .dlhero-title br { display: none; }
html.site-pearl body.public-ui .dlhero-sub { font-size: 13px !important; line-height: 1.7 !important; margin: 0 0 16px !important; max-width: 500px !important; color: #6a7e99 !important; }
html.site-pearl body.public-ui .dlhero-search { min-height: 44px !important; border-radius: 11px !important; padding: 4px 5px 4px 13px !important; box-shadow: none !important; border: 1px solid #d6e3f7 !important; background: #fff !important; }
html.site-pearl body.public-ui .dlhero-search button { min-height: 36px !important; padding: 8px 14px !important; font-size: 12px !important; border-radius: 8px !important; }
html.site-pearl body.public-ui .dlhero-stats { gap: 10px !important; }
html.site-pearl body.public-ui .dlhero-stat-card { padding: 15px !important; border: 1px solid #dfe8f5 !important; border-radius: 13px !important; background: #ffffffb3 !important; min-height: 88px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .dlhero-stat-val { font-size: 25px !important; letter-spacing: -.6px !important; }
html.site-pearl body.public-ui .dlhero-stat-label { font-size: 10px !important; }
html.site-pearl body.public-ui :is(.dl-tabs,.blog-filterbar) { margin-bottom: 18px !important; gap: 8px !important; }
html.site-pearl body.public-ui :is(.dl-tab,.blog-tab-btn) { min-height: 40px !important; border-radius: 10px !important; padding: 10px 14px !important; font-size: 12px !important; box-shadow: none !important; }
html.site-pearl body.public-ui :is(.dl-grid,.blog-grid) { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 16px !important; }
html.site-pearl body.public-ui :is(.dl-card,.blog-card) { border-radius: 16px !important; border: 1px solid var(--ui-line) !important; box-shadow: var(--ui-shadow) !important; transition: transform .2s,box-shadow .2s !important; }
html.site-pearl body.public-ui :is(.dl-card,.blog-card):hover { transform: translateY(-3px) !important; box-shadow: 0 10px 24px #243f6510 !important; }
html.site-pearl body.public-ui .dl-card-banner { height: 150px !important; }
html.site-pearl body.public-ui .dl-card-banner-img { object-fit: contain !important; background: #eff3f9 !important; }
html.site-pearl body.public-ui :is(.dl-card-body,.blog-card-body) { padding: 16px !important; }
html.site-pearl body.public-ui :is(.dl-card-name,.blog-card-title) { font-size: 16px !important; line-height: 1.5 !important; letter-spacing: -.3px !important; }
html.site-pearl body.public-ui :is(.dl-card-desc,.blog-card-excerpt) { font-size: 12px !important; line-height: 1.7 !important; color: #6a7c94 !important; }
html.site-pearl body.public-ui .dl-card-icon { width: 40px !important; height: 40px !important; border-radius: 11px !important; }
html.site-pearl body.public-ui .dl-card-actions a { min-height: 42px !important; border-radius: 10px !important; font-size: 12px !important; }
html.site-pearl body.public-ui .blog-page > div { max-width: 1240px !important; padding: 0 !important; }
html.site-pearl body.public-ui .blog-hero { padding: 0 0 22px !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; text-align: left !important; }
html.site-pearl body.public-ui .blog-page .blog-hero-sub { color: #71849f !important; font-size: 13px !important; }
html.site-pearl body.public-ui .blog-page .blog-tab-btn:is(:link,:visited) { display: inline-flex !important; align-items: center; gap: 7px; color: #657e9f !important; background: #fff !important; border: 1px solid #dfe7f2 !important; }
html.site-pearl body.public-ui .blog-page .blog-tab-btn.active:is(:link,:visited) { color: #245ac0 !important; background: #e8f0ff !important; border-color: #cbdcfa !important; }
html.site-pearl body.public-ui .blog-page .blog-search-inp { border: 0 !important; background: transparent !important; box-shadow: none !important; min-width: 0; color: #3f5f89 !important; }
html.site-pearl body.public-ui .blog-search-wrap { border-radius: 10px !important; min-height: 42px !important; background: #fff !important; border: 1px solid #dce5f1 !important; }
html.site-pearl body.public-ui .blog-card-thumb { height: 160px !important; object-fit: cover !important; }
html.site-pearl body.public-ui .blog-card-thumb-placeholder { height: 150px !important; background: #eaf1fc !important; color: #90acd3 !important; }
html.site-pearl body.public-ui :is(.blog-empty,.dl-empty) { padding: 54px 24px !important; background: #fff !important; border: 1px dashed #d8e3f2 !important; border-radius: 17px !important; font-size: 13px !important; }
html.site-pearl body.public-ui .dlhero .dlhero-badge { display: inline-flex !important; font-size: 10px !important; padding: 5px 9px !important; margin: 0 !important; }
html.site-pearl body.public-ui .dlhero .dlhero-title,
html.site-pearl body.public-ui .dlhero .dlhero-sub { display: block !important; }
html.site-pearl body.public-ui .dlhero .dlhero-stats { display: grid !important; width: 280px; flex-shrink: 0; grid-template-columns: repeat(2,minmax(0,1fr)); }
html.site-pearl body.public-ui .dlhero .dlhero-inner { display: grid !important; grid-template-columns: minmax(0,1fr) 280px !important; align-items: center; max-width: none !important; }
html.site-pearl body.public-ui .dlhero .dlhero-text { min-width: 0 !important; }
html.site-pearl body.public-ui .dlhero { box-shadow: var(--ui-shadow) !important; }
html.site-pearl body.public-ui .dlhero .dlhero-stat-icon { width: 28px !important; height: 28px !important; border-radius: 8px !important; font-size: 15px !important; margin-bottom: 7px !important; }
html.site-pearl body.public-ui .dlhero .dlhero-search-inp { border: 0 !important; padding: 5px !important; background: transparent !important; box-shadow: none !important; outline: 0; min-width: 0; }
html.site-pearl body.public-ui .dlhero .dlhero-search-btn { background: #2563d9 !important; color: #fff !important; box-shadow: none !important; }
html.site-pearl body.public-ui .dlhero .dlhero-accent { color: #2563d9 !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
html.site-pearl body.public-ui :is(.dl-empty,.blog-empty) { box-shadow: none !important; }

/* Contact: clear information cards alongside the message form. */
html.site-pearl body.public-ui .ct2-hero { padding: 22px 26px !important; margin: 0 0 20px !important; min-height: 0 !important; border: 1px solid #dce7f7 !important; border-radius: 18px !important; background: linear-gradient(115deg,#fff,#edf4ff) !important; }
html.site-pearl body.public-ui .ct2-hero-title { font-size: 29px !important; letter-spacing: -.9px !important; margin: 9px 0 !important; line-height: 1.3 !important; }
html.site-pearl body.public-ui .ct2-hero-sub { font-size: 13px !important; color: #6b809d !important; line-height: 1.7 !important; }
html.site-pearl body.public-ui .ct2-hero-illo { width: 125px !important; height: 112px !important; }
html.site-pearl body.public-ui .ct2-hero-line { display: none !important; }
html.site-pearl body.public-ui .ct2-main { grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr) !important; gap: 18px !important; margin-bottom: 22px !important; }
html.site-pearl body.public-ui .ct2-info-col { gap: 12px !important; }
html.site-pearl body.public-ui .ct2-info-card { padding: 17px !important; border: 1px solid var(--ui-line) !important; border-radius: 14px !important; box-shadow: var(--ui-shadow) !important; gap: 12px !important; }
html.site-pearl body.public-ui .ct2-info-card > div:last-child { min-width: 0; }
html.site-pearl body.public-ui .ct2-info-icon { width: 39px !important; height: 39px !important; border-radius: 11px !important; font-size: 19px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .ct2-info-lbl { font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; color: #7d8fa7 !important; }
html.site-pearl body.public-ui .ct2-info-val { font-size: 14px !important; margin-top: 4px !important; overflow-wrap: anywhere; }
html.site-pearl body.public-ui .ct2-info-sub { font-size: 11px !important; line-height: 1.6 !important; color: #7a8da7 !important; }
html.site-pearl body.public-ui .ct2-form-card { padding: 22px !important; border: 1px solid var(--ui-line) !important; border-radius: 17px !important; box-shadow: var(--ui-shadow) !important; }
html.site-pearl body.public-ui .ct2-form-title { font-size: 19px !important; letter-spacing: -.5px !important; }
html.site-pearl body.public-ui .ct2-form-sub { font-size: 12px !important; line-height: 1.7 !important; color: #72849d !important; }
html.site-pearl body.public-ui .ct2-label { font-size: 12px !important; color: #526a8b !important; }
html.site-pearl body.public-ui .ct2-textarea { min-height: 112px !important; height: auto !important; line-height: 1.7 !important; padding: 12px !important; resize: vertical; }
html.site-pearl body.public-ui .ct2-submit-note { font-size: 10px !important; line-height: 1.6 !important; }
html.site-pearl body.public-ui .ct2-section-head { margin-bottom: 14px !important; }
html.site-pearl body.public-ui .ct2-section-head h2 { font-size: 18px !important; letter-spacing: -.4px !important; }
html.site-pearl body.public-ui .ct2-section-head p { font-size: 12px !important; }
html.site-pearl body.public-ui .ct2-channels { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 12px !important; }
html.site-pearl body.public-ui .ct2-ch-card { padding: 16px !important; border: 1px solid var(--ui-line) !important; border-radius: 14px !important; gap: 12px !important; box-shadow: var(--ui-shadow) !important; }
html.site-pearl body.public-ui .ct2-ch-icon { width: 40px !important; height: 40px !important; border-radius: 12px !important; font-size: 20px !important; box-shadow: none !important; }
html.site-pearl body.public-ui .ct2-ch-name { font-size: 15px !important; }
html.site-pearl body.public-ui .ct2-ch-desc { font-size: 11px !important; line-height: 1.6 !important; }
html.site-pearl body.public-ui .ct2-ch-tags span { font-size: 9px !important; }
html.site-pearl body.public-ui .ct2-layout--form { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 18px; align-items: start; margin-bottom: 22px; }
html.site-pearl body.public-ui .ct2-layout--form .ct2-main { display: contents !important; }
html.site-pearl body.public-ui .ct2-layout--form .ct2-info-col { grid-column: 1; grid-row: 1; }
html.site-pearl body.public-ui .ct2-layout--form .ct2-form-card { grid-column: 2; grid-row: 1 / span 2; }
html.site-pearl body.public-ui .ct2-layout--form .ct2-channel-section { grid-column: 1; grid-row: 2; margin: 0 !important; padding: 16px !important; border: 1px solid var(--ui-line) !important; border-radius: 15px !important; background: #fff !important; box-shadow: var(--ui-shadow) !important; }
html.site-pearl body.public-ui .ct2-layout--form .ct2-channels { grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
html.site-pearl body.public-ui .ct2-layout--form .ct2-ch-card { padding: 12px !important; background: #f8fafd !important; }
html.site-pearl body.public-ui .ct2-layout--form .ct2-section-head { padding: 0 0 12px !important; }
html.site-pearl body.public-ui .ct2-layout--form .ct2-section-head h2 { font-size: 16px !important; }

@media (max-width:1180px) {
  html.site-pearl body.public-ui { --sidebar-w: 250px; }
  html.site-pearl body.public-ui .site-main { margin-left: 0 !important; }
  html.site-pearl body.public-ui #topbar.topbar { left: 0 !important; }
  html.site-pearl body.public-ui .page-content { padding: 22px !important; }
}
@media (max-width:900px) {
  html.site-pearl body.public-ui .home-overview--ranked { grid-template-columns: minmax(0,1fr) minmax(240px,.8fr); }
  html.site-pearl body.public-ui :is(.dl-grid,.blog-grid,.home-dashboard .sp-main-grid) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html.site-pearl body.public-ui .ct2-channels { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html.site-pearl body.public-ui .about-cards-row { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html.site-pearl body.public-ui .topup-workspace > .topup-section { padding: 16px !important; }
  html.site-pearl body.public-ui .hv3-stat { padding: 15px !important; }
  html.site-pearl body.public-ui .hv3-stat-val { font-size: 22px !important; }
}
@media (max-width:700px) {
  html.site-pearl body.public-ui { --topbar-h: 56px; --ui-gap: 12px; }
  html.site-pearl body.public-ui .page-content { padding: 16px 12px !important; }
  html.site-pearl body.public-ui #topbar.topbar { padding-inline: 12px !important; gap: 8px !important; }
  html.site-pearl body.public-ui .home-overview--ranked { grid-template-columns: minmax(0,1fr); gap: 12px; }
  html.site-pearl body.public-ui .home-dashboard .hd-profile-card { padding: 16px !important; min-height: 138px !important; gap: 16px 8px !important; }
  html.site-pearl body.public-ui .home-dashboard .home-hero__viewport { min-height: 240px !important; }
  html.site-pearl body.public-ui .home-dashboard .home-hero__slide { align-items: center !important; }
  html.site-pearl body.public-ui .home-dashboard .home-hero__content { width: 100% !important; padding: 24px 18px 32px !important; }
  html.site-pearl body.public-ui .home-dashboard .home-hero__title { font-size: 25px !important; }
  html.site-pearl body.public-ui .home-dashboard .home-hero__subtitle { font-size: 12px !important; }
  html.site-pearl body.public-ui .home-dashboard .home-hero__desc { font-size: 11px !important; }
  html.site-pearl body.public-ui .home-dashboard .hd-avatar { width: 42px !important; height: 42px !important; }
  html.site-pearl body.public-ui .home-dashboard .hd-brand-signature { font-size: 20px !important; }
  html.site-pearl body.public-ui .home-quick-link { font-size: 11px !important; padding: 10px 12px; }
  html.site-pearl body.public-ui .hmt-empty { min-height: 52px !important; padding: 12px !important; }
  html.site-pearl body.public-ui .home-dashboard .tp3-wrap { padding: 12px !important; }
  html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-cards { gap: 8px !important; }
  html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-cards .tp3-card { height: auto !important; border-radius: 11px !important; }
  html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-card .tp3-card-content { min-height: 36px !important; padding: 8px 9px !important; }
  html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-card .tp3-card-name { font-size: 11px !important; }
  html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-head-right { display: none !important; }
  html.site-pearl body.public-ui .home-dashboard .tp3-wrap .tp3-features { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 6px !important; }
  html.site-pearl body.public-ui .home-dashboard .hd-stats-row { gap: 8px !important; }
  html.site-pearl body.public-ui .home-dashboard .hd-stat-card { padding: 12px 9px !important; display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 8px !important; align-content: start; position: relative; }
  html.site-pearl body.public-ui .home-dashboard .hd-stat-icon { width: 28px !important; height: 28px !important; border-radius: 9px !important; font-size: 15px !important; }
  html.site-pearl body.public-ui .home-dashboard .hd-stat-val { font-size: 15px !important; }
  html.site-pearl body.public-ui .home-dashboard .hd-stat-lbl { font-size: 10px !important; }
  html.site-pearl body.public-ui .home-dashboard .hd-stat-action { position: absolute !important; top: 8px; right: 7px; width: 26px !important; height: 30px !important; }
  html.site-pearl body.public-ui .topup-header { flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 18px !important; }
  html.site-pearl body.public-ui .topup-header > div:nth-child(2) { flex: 1; min-width: 0; }
  html.site-pearl body.public-ui .topup-header-icon { width: 42px !important; height: 42px !important; }
  html.site-pearl body.public-ui .topup-sub { font-size: 11px !important; }
  html.site-pearl body.public-ui .topup-balance-pill { width: 100% !important; margin: 0 !important; padding: 11px 13px !important; }
  html.site-pearl body.public-ui .topup-page .topup-bal-inner { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; flex: 1; }
  html.site-pearl body.public-ui .topup-tabs { width: 100% !important; margin-bottom: 14px !important; }
  html.site-pearl body.public-ui .topup-tab { flex: 1; font-size: 12px !important; padding: 10px !important; }
  html.site-pearl body.public-ui .topup-workspace { grid-template-columns: minmax(0,1fr); gap: 12px; }
  html.site-pearl body.public-ui .topup-workspace > .topup-section:nth-child(n) { grid-column: auto; grid-row: auto; padding: 16px !important; border-radius: 14px !important; }
  html.site-pearl body.public-ui .topup-pkg { min-height: 74px !important; padding: 17px 5px 10px !important; }
  html.site-pearl body.public-ui .topup-pkg-amount { font-size: 15px !important; }
  html.site-pearl body.public-ui .tc-telco { height: 74px !important; }
  html.site-pearl body.public-ui :is(.topup-input,.tc-input,.ct2-input,.dlhero-search-inp) { font-size: 16px !important; }
  html.site-pearl body.public-ui .hv3-stats { gap: 8px !important; }
  html.site-pearl body.public-ui .hv3-stat { padding: 12px 10px !important; min-height: 108px !important; border-radius: 13px !important; }
  html.site-pearl body.public-ui .hv3-stat-icon { display: none !important; }
  html.site-pearl body.public-ui .hv3-stat-val { font-size: 18px !important; }
  html.site-pearl body.public-ui .hv3-stat-label { font-size: 10px !important; line-height: 1.5 !important; }
  html.site-pearl body.public-ui .hv3-delta { font-size: 9px !important; }
  html.site-pearl body.public-ui .hv3-filterbar { flex-wrap: wrap !important; }
  html.site-pearl body.public-ui .hv3-tabs { width: 100% !important; }
  html.site-pearl body.public-ui .hv3-tab { flex: 1; padding: 10px 6px !important; font-size: 11px !important; gap: 5px !important; }
  html.site-pearl body.public-ui .hv3-time-filter { padding: 3px 8px 5px !important; }
  html.site-pearl body.public-ui .hv3-thead { display: none !important; }
  html.site-pearl body.public-ui .hv3-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 12px !important; padding: 16px !important; }
  html.site-pearl body.public-ui .hv3-col-tx { grid-column: 1/-1 !important; }
  html.site-pearl body.public-ui .hv3-row > [data-mobile-label]::before { content: attr(data-mobile-label); display: block; font-size: 10px; font-weight: 400; color: #8a9aaf; margin-bottom: 5px; }
  html.site-pearl body.public-ui .hv3-col-status { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
  html.site-pearl body.public-ui .hv3-row > .hv3-col-status::before { flex-basis: 100%; }
  html.site-pearl body.public-ui .dlhero { padding: 18px !important; border-radius: 15px !important; }
  html.site-pearl body.public-ui .dlhero-inner { flex-direction: column !important; gap: 18px !important; }
  html.site-pearl body.public-ui .dlhero .dlhero-inner { grid-template-columns: minmax(0,1fr) !important; }
  html.site-pearl body.public-ui .dlhero-title { font-size: 26px !important; }
  html.site-pearl body.public-ui .dlhero-stats { grid-template-columns: repeat(4,minmax(0,1fr)) !important; width: 100% !important; gap: 6px !important; }
  html.site-pearl body.public-ui .dlhero .dlhero-stats { width: 100% !important; }
  html.site-pearl body.public-ui .dlhero-stat-card { padding: 10px 4px !important; min-height: 70px !important; border-radius: 10px !important; }
  html.site-pearl body.public-ui .dlhero-stat-val { font-size: 20px !important; }
  html.site-pearl body.public-ui .dlhero-stat-label { font-size: 9px !important; }
  html.site-pearl body.public-ui .dlhero-stat-icon { font-size: 16px !important; }
  html.site-pearl body.public-ui .blog-filterbar { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; }
  html.site-pearl body.public-ui .blog-page .blog-tab-btn:is(:link,:visited) { flex: 1; justify-content: center; padding: 9px 7px !important; font-size: 11px !important; }
  html.site-pearl body.public-ui .blog-search-wrap { width: 100% !important; }
  html.site-pearl body.public-ui .ct2-main { grid-template-columns: minmax(0,1fr) !important; gap: 14px !important; }
  html.site-pearl body.public-ui .ct2-layout--form { display: flex; flex-direction: column; gap: 14px; }
  html.site-pearl body.public-ui .ct2-layout--form :is(.ct2-info-col,.ct2-form-card,.ct2-channel-section) { width: 100%; }
  html.site-pearl body.public-ui .ct2-hero { padding: 18px !important; }
  html.site-pearl body.public-ui .ct2-hero-title { font-size: 25px !important; }
  html.site-pearl body.public-ui .ct2-hero-right { display: none !important; }
  html.site-pearl body.public-ui .ct2-form-card { padding: 18px !important; }
  html.site-pearl body.public-ui .ct2-channels { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width:480px) {
  html.site-pearl body.public-ui :is(.dl-grid,.blog-grid,.home-dashboard .sp-main-grid) { grid-template-columns: minmax(0,1fr) !important; }
  html.site-pearl body.public-ui .home-dashboard .hd-brand-signature { font-size: 18px !important; }
  html.site-pearl body.public-ui .home-dashboard .hd-profile-badges { font-size: 9px !important; }
  html.site-pearl body.public-ui .ct2-form-row { grid-template-columns: minmax(0,1fr) !important; }
  html.site-pearl body.public-ui .hv3-detail-grid { grid-template-columns: minmax(0,1fr) !important; }
  html.site-pearl body.public-ui .hv3-detail-item.wide { grid-column: auto !important; }
}
@media (prefers-reduced-motion:reduce) {
  html.site-pearl body.public-ui .hv3-page .hv3-status-badge.success > i { animation: none !important; }
  html.site-pearl body.public-ui :is(.sb-vip-promo b,.home-quick-link,.tp3-card,.dl-card,.blog-card) { animation: none !important; transition: none !important; }
}