/*
 * H5 visual layer — designed to preserve existing business DOM and scripts.
 * Reference: jpjd.live dark glass interface.
 */
:root {
  --ui-bg: #000000;
  --ui-bg-deep: #050507;
  --ui-ink: #ffffff;
  --ui-ink-soft: #e5e5ea;
  --ui-muted: #86868b;
  --ui-dim: #ffffff66;
  --ui-line: #ffffff14;
  --ui-line-strong: #ffffff26;
  --ui-glass: #16161acc;
  --ui-glass-strong: #1a1a1feb;
  --ui-panel: linear-gradient(160deg, #1c1c21e8, #121216ec);
  --ui-panel-soft: linear-gradient(155deg, #18181dfa, #0b0b0efa);
  --ui-shadow: 0 18px 42px -28px #000000e6;
  --ui-red: #fe2c55;
  --ui-red-deep: #c91f44;
  --ui-red-soft: #fe2c5538;
  --ui-cyan: #25f4ee;
  --ui-cyan-soft: #25f4ee33;
  --ui-purple: #fe2c55;
  --ui-purple-soft: #fe2c5538;
  --ui-blue: #25f4ee;
  --ui-coral: #fe2c55;
  --ui-pink: #fe2c55;
  --ui-teal: #25f4ee;
  --ui-gold: #e8c547;
  --ui-gold-soft: #ff6a8a;
  --ui-focus: #fe2c55bf;
  --page-background: radial-gradient(circle at 78% -6%, rgb(254 44 85 / 18%), transparent 50%), radial-gradient(circle at 8% 12%, rgb(37 244 238 / 10%), transparent 48%), var(--ui-bg);
  --phone-frame-width: 430px;
  --bg: var(--ui-bg);
  --bg-soft: #0f0f12;
  --panel: var(--ui-glass);
  --panel-soft: var(--ui-glass-strong);
  --line: var(--ui-line);
  --text: var(--ui-ink);
  --muted: var(--ui-muted);
  --text-dark: var(--ui-ink);
  --text-soft-dark: var(--ui-muted);
  --gold: var(--ui-red);
  --gold-deep: var(--ui-red-deep);
  --accent: var(--ui-red);
  --accent-ink: #ffffff;
  --navy: #141418;
  --navy-soft: #1f1f25;
  --shadow: var(--ui-shadow);
  --shadow-md: 0 24px 66px #000000a0;
}

html, body {
  min-height: 100%;
  color-scheme: dark;
  background: var(--page-background) !important;
  color: var(--ui-ink) !important;
  font-family: "SF Pro Display", "Inter var", Inter, "Segoe UI Variable", system-ui, -apple-system, "PingFang SC", "Noto Sans SC", sans-serif !important;
}
body { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; overflow-x: hidden !important; }
body::before { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(55% 32% at 78% -4%, rgb(254 44 85 / 7%), transparent 70%), radial-gradient(48% 30% at 4% 14%, rgb(37 244 238 / 6%), transparent 72%); }
* { scrollbar-color: #fe2c5570 #ffffff0b; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: #ffffff08; }
*::-webkit-scrollbar-thumb { background: #fe2c5585; border-radius: 999px; }
a { color: inherit; }
img { max-width: 100%; }

/* Loading and notification layers */
#toast { z-index: 9999 !important; border: 1px solid #ffffff26 !important; border-radius: 16px !important; background: #141418ed !important; color: var(--ui-ink) !important; box-shadow: 0 18px 55px #000000a0, inset 0 1px #ffffff1a !important; backdrop-filter: blur(22px) !important; }
#loading { z-index: 9998 !important; background: #000000cf !important; backdrop-filter: blur(10px) !important; }
.spinner { border-color: #ffffff1a !important; border-top-color: var(--ui-red) !important; box-shadow: 0 0 24px #fe2c5573 !important; }

/* Shell, page head and surfaces */
.tg-offset, .page-body, .home-page, .login-wrap { background: transparent !important; }
.tg-offset { min-height: 100vh; }
.mine-page, .task-page, .vip-page, .withdraw-page, .bind-page, .sub-page, .page, .lang-page, .team-page, .service-page, .pay-page, .record-page, .security-page { padding-bottom: 102px !important; }
.page-head, .page-title, .sub-title, .page-sub, .task-hero-title, .vip-hero-title, .mine-name, .login-title, .pay-title { color: var(--ui-ink) !important; }
.page-sub, .task-hero-sub, .vip-hero-sub, .login-sub, .mine-id, .mine-stat-title, .mine-stat-sub, .quick-sub, .task-meta, .task-card-desc, .form-hint, .vip-section-sub { color: var(--ui-muted) !important; }
.page-head, .task-hero, .vip-hero, .wallet-hero, .bal-banner, .mine-top-card, .profile-hero { position: relative; overflow: hidden; border: 1px solid #ffffff1f !important; border-radius: 26px !important; background: radial-gradient(120% 130% at 12% 0, #fe2c5529, transparent 62%), radial-gradient(120% 130% at 100% 100%, #25f4ee1f, transparent 65%), var(--ui-panel-soft) !important; box-shadow: 0 26px 60px #000000a6, inset 0 1px #ffffff14 !important; }
.page-head::after, .task-hero::after, .vip-hero::after, .mine-top-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(140deg, #ffffff14, transparent 32%); }
.page-back, .vip-back, .back-btn { position: relative; border: 1px solid #ffffff26 !important; border-radius: 14px !important; background: linear-gradient(135deg, #1f1f24, #141418) !important; color: var(--ui-ink) !important; box-shadow: 0 12px 28px #00000066, inset 0 1px #ffffff26 !important; }
.page-back img, .back-btn img { filter: brightness(4) saturate(0); }

/* Glass components across independent page files */
.card, .mine-stat, .lang-entry, .region-entry, .region-panel, .quick-item, .ticker-card, .ticker-item, .task-stat, .progress-card, .task-item, .task-card, .vip-card, .benefit-card, .plan-card, .vip-notes, .vip-note, .pay-card, .pay-item, .pay-note, .method-option, .selector-card, .quota-row, .record-card, .record-row, .security-modal, .sec-item, .slip-item, .empty, .modal-box, .panel, .list-wrap, .balance-card, .bank-card, .info-card, .form-card, .support-card {
  color: var(--ui-ink) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 22px !important;
  background: var(--ui-panel) !important;
  box-shadow: var(--ui-shadow), inset 0 1px #ffffff12 !important;
  backdrop-filter: blur(18px) !important;
}
.card, .mine-stat, .lang-entry, .region-entry, .quick-item, .task-item, .task-card, .plan-card, .record-card, .record-row, .sec-item, .slip-item { overflow: hidden; }

/* Display text and icon tiles */
.mine-avatar { border: 2px solid #fe2c5566 !important; background: linear-gradient(145deg, #fe2c5559, #25f4ee40) !important; box-shadow: 0 12px 28px #00000066, inset 0 1px #ffffff3d !important; }
.mine-name { text-shadow: 0 4px 18px #fe2c5559; }
.mine-action, .mine-stat-pill, .reward-btn, .plan-btn, .submit-btn, .btn-primary, .task-btn.claim, .chip.on, .type-btn.on, .region-chip.active, .method-option.active, .selector-chip.active { border: 1px solid #fe2c5566 !important; border-radius: 14px !important; background: linear-gradient(135deg, #fe2c55, #c91f44) !important; color: #fff !important; box-shadow: 0 12px 28px #fe2c5559, inset 0 1px #ffffff3d !important; }
.btn-dark, .task-btn.play { border: 1px solid #ffffff26 !important; background: linear-gradient(135deg, #26262c, #141418) !important; color: var(--ui-ink) !important; }
.btn-outline, .task-btn.done, .chip, .type-btn { border: 1px solid var(--ui-line-strong) !important; background: #ffffff0a !important; color: var(--ui-ink-soft) !important; }
.btn:active, .task-btn:active, .plan-btn:active, .mine-action:active, .quick-item:active, .profile-menu-row:active { transform: scale(.98); }

.mine-stat-icon, .quick-icon, .lang-entry-icon, .region-entry-icon, .task-hero-icon, .task-stat-icon, .benefit-icon, .vip-crown, .vip-note-icon, .plan-icon, .ticker-avatar, .method-option-icon, .pay-note-icon, .quota-badge, .icon-tile {
  color: var(--ui-ink) !important;
  border: 1px solid #ffffff1f !important;
  background: linear-gradient(145deg, #fe2c5547, #25f4ee2b) !important;
  box-shadow: inset 0 1px #ffffff33, 0 10px 22px -14px #fe2c55a6 !important;
}
.ui-inline-icon { display: block !important; width: 18px !important; height: 18px !important; object-fit: contain !important; filter: brightness(1.45) saturate(.75); }
.mine-stat-icon .ui-inline-icon, .quick-icon .ui-inline-icon, .lang-entry-icon .ui-inline-icon, .region-entry-icon .ui-inline-icon, .task-stat-icon .ui-inline-icon, .benefit-icon .ui-inline-icon, .vip-crown .ui-inline-icon, .vip-note-icon .ui-inline-icon, .plan-icon .ui-inline-icon { width: 20px !important; height: 20px !important; }

/* Inputs, fields and sheets */
.form-label, .pay-label, .selector-title, .section-title, .vip-section-title, .vip-notes-title, .record-title, .security-title { color: var(--ui-ink) !important; }
.form-input, input, select, textarea, .amount-input { color: var(--ui-ink) !important; border: 1px solid #ffffff24 !important; border-radius: 14px !important; background: #ffffff0b !important; box-shadow: inset 0 1px #ffffff0a !important; }
.form-input:focus, input:focus, select:focus, textarea:focus, .amount-input:focus { border-color: #fe2c55bf !important; box-shadow: 0 0 0 3px #fe2c553d !important; background: #ffffff12 !important; }
input::placeholder, textarea::placeholder { color: #ffffff66 !important; }
.modal-overlay, .drawer-overlay { background: #000000c2 !important; backdrop-filter: blur(7px) !important; }
.modal-box { border-radius: 24px 24px 0 0 !important; background: linear-gradient(160deg, #1a1a1ffa, #0b0b0ffb) !important; }

/* Task center */
.task-hero { padding: 18px 16px 16px !important; }
.task-hero-title, .vip-hero-title { font-weight: 900 !important; letter-spacing: -.035em; }
.task-hero-title, .vip-hero-title, .task-stat-value, .mine-stat-value, .plan-price, .bal-banner .val, .record-amount { color: transparent !important; background: linear-gradient(110deg, #fff, #ffd1dc 48%, #25f4ee) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.task-stat, .progress-card { background: #ffffff0a !important; border-color: #ffffff17 !important; }
.progress-bar, .profile-menu-bar { background: #ffffff17 !important; }
.progress-fill, .profile-menu-bar i { background: linear-gradient(90deg, #fe2c55, #25f4ee) !important; box-shadow: 0 0 18px #fe2c5580; }
.task-item { padding: 14px !important; }
.task-item:hover, .quick-item:hover, .sec-item:hover, .record-card:hover { border-color: #fe2c5559 !important; transform: translateY(-1px); }
.task-thumb, .task-thumb-empty { border: 1px solid #ffffff17; background: linear-gradient(135deg, #1a1a1f, #0a0a0d) !important; }
.task-badges span, .vip-meta span, .plan-badge, .status-chip, .badge { border: 1px solid #fe2c5540 !important; border-radius: 999px !important; background: #fe2c551f !important; color: #ffd1dc !important; }
.task-video, .slide { border: 1px solid #ffffff17; border-radius: 18px; background: #000 !important; }
.task-btn { border-radius: 12px !important; }

/* VIP cards and plans */
.vip-page { background: transparent !important; }
.vip-hero, .task-hero { background: radial-gradient(90% 120% at 90% 0, #fe2c552b, transparent 62%), radial-gradient(70% 90% at 0% 100%, #25f4ee1c, transparent 60%), var(--ui-panel-soft) !important; }
.benefit-card { min-height: 128px; background: #ffffff09 !important; }
.benefit-title, .plan-name, .vip-name { color: var(--ui-ink) !important; }
.benefit-desc, .plan-sub, .plan-feature-text, .vip-section-sub, .vip-note-text { color: var(--ui-ink-soft) !important; }
.plan-card { --tier-accent: #25f4ee; --tier-bg: linear-gradient(145deg, #0f1a1c, #0a1012); --tier-line: #25f4ee47; padding: 16px !important; background: radial-gradient(circle at 100% 0, #25f4ee2e, transparent 55%), var(--tier-bg) !important; border-color: var(--tier-line) !important; box-shadow: 0 24px 65px #00000080, inset 0 1px #ffffff29 !important; }
.plan-list .plan-card:nth-child(2) { --tier-accent: #ffffff; --tier-bg: linear-gradient(145deg, #1a1a1f, #0f0f12); --tier-line: #ffffff33; }
.plan-list .plan-card:nth-child(3) { --tier-accent: #fe2c55; --tier-bg: linear-gradient(145deg, #1f1217, #140a0d); --tier-line: #fe2c555c; }
.plan-list .plan-card:nth-child(4) { --tier-accent: #e8c547; --tier-bg: linear-gradient(145deg, #1f1a0d, #0f0d08); --tier-line: #e8c54757; }
.plan-list .plan-card:nth-child(n+5) { --tier-accent: #ff8da9; --tier-bg: linear-gradient(145deg, #1f1217, #140a0d); --tier-line: #ff8da957; }
.plan-card::before { background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--tier-accent) 25%, transparent), transparent 58%) !important; }
.plan-icon { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.plan-icon .ui-tier-crest { width: 42px !important; height: 34px !important; object-fit: contain; }
.plan-price, .plan-feature-title, .plan-feature-dot { color: var(--tier-accent) !important; }
.plan-feature-dot { background: var(--tier-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier-accent) 12%, transparent) !important; }
.plan-features { border: 1px solid #ffffff12 !important; background: #0000001f !important; }
.plan-btn { background: linear-gradient(135deg, color-mix(in srgb, var(--tier-accent) 88%, #fff 12%), color-mix(in srgb, var(--tier-accent) 65%, #3d2777)) !important; }
.plan-btn.disabled { color: var(--ui-muted) !important; background: #ffffff14 !important; border-color: #ffffff17 !important; box-shadow: none !important; }
.vip-card { background: #ffffff08 !important; }
.vip-card.active { background: linear-gradient(145deg, #fe2c553d, #25f4ee1f) !important; border-color: #fe2c5570 !important; color: var(--ui-ink) !important; }
.vip-card.active .vip-name, .vip-card.active .vip-price { color: var(--ui-ink) !important; }

/* Profile and settings pages */
.lang-entry, .region-entry, .quick-item, .sec-item { background: var(--ui-panel) !important; }
.lang-entry-title, .region-entry-title, .quick-title, .sec-item-title, .ticker-title, .ticker-user { color: var(--ui-ink) !important; }
.lang-entry-tag, .region-entry-tag { border: 1px solid #fe2c5540 !important; background: #fe2c551f !important; color: #ffd1dc !important; }
.lang-entry-arrow, .region-entry-arrow, .sec-item-arrow { color: #e5e5ea !important; background: #ffffff0b !important; }
.quick-menu { gap: 12px !important; }
.quick-item { min-height: 118px; }
.ticker-card { background: linear-gradient(160deg, #1a1a1fdb, #0b0b0ee6) !important; }
.ticker-live { color: #25f4ee !important; }
.ticker-amount { color: var(--ui-gold-soft) !important; }
.ticker-item { border-color: #ffffff12 !important; background: #ffffff08 !important; }

/* Withdraw, records, form, payment and help views */
.bal-banner, .balance-banner, .wallet-balance, .withdraw-hero { border: 1px solid #ffffff1f !important; background: radial-gradient(110% 130% at 12% 0, #fe2c5533, transparent 64%), radial-gradient(80% 100% at 100% 100%, #25f4ee1c, transparent 60%), var(--ui-panel-soft) !important; box-shadow: 0 26px 60px #000000a6, inset 0 1px #ffffff14 !important; }
.slip-item, .record-card, .record-row { background: var(--ui-panel) !important; }
.slip-id, .record-sub, .record-extra, .pay-sub, .pay-label { color: var(--ui-muted) !important; }
.slip-amount, .record-amount, .pay-value { color: #ffffff !important; }
.badge-0 { background: #fe2c5529 !important; color: #ffd1dc !important; }
.badge-1 { background: #25f4ee29 !important; color: #bafff2 !important; }
.badge-2 { background: #ff829529 !important; color: #ffe0ed !important; }
.badge-5 { background: #e8c54729 !important; color: #ffe9ad !important; }
.upload-box, .upload-preview, .pay-qr { border-color: #ffffff26 !important; background: #ffffff0a !important; }
.tab-bar { border: 1px solid var(--ui-line) !important; background: #ffffff08 !important; }
.tab-btn.on { border-radius: 12px !important; background: linear-gradient(135deg, #fe2c553d, #25f4ee1f) !important; color: #fff !important; }

/* Support and login */
.support-float { right: 14px !important; top: 12px !important; min-height: 40px !important; padding: 10px 14px !important; border: 1px solid #fe2c5566 !important; background: linear-gradient(135deg, #fe2c55, #c91f44) !important; color: #fff !important; box-shadow: 0 12px 28px #fe2c5559, inset 0 1px #ffffff3d !important; animation: none !important; }
.support-float::before { border-color: #ffffff3d !important; }
.login-wrap { background: radial-gradient(circle at 78% -6%, rgb(254 44 85 / 18%), transparent 45%), radial-gradient(circle at 8% 12%, rgb(37 244 238 / 10%), transparent 42%), var(--ui-bg) !important; }
.login-box { border: 1px solid #ffffff1f !important; border-radius: 28px !important; background: linear-gradient(160deg, #16161aed, #0a0a0df2) !important; box-shadow: 0 28px 75px #000000a6, inset 0 1px #ffffff14 !important; }
.login-tabs { border: 1px solid #ffffff12 !important; background: #ffffff0a !important; }
.login-tab { color: var(--ui-muted) !important; }
.login-tab.on { color: var(--ui-ink) !important; background: linear-gradient(145deg, #fe2c553d, #25f4ee1f) !important; box-shadow: inset 0 1px #ffffff12 !important; }
.divider::before, .divider::after { background: #ffffff1a !important; }

/* Five-item floating navigation. ui-reference.js owns contents. */
.ref-nav, .bottom-nav, .jpjd-bottom-nav {
  position: fixed !important;
  z-index: 1400 !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  display: grid !important;
  width: min(660px, calc(100% - 40px)) !important;
  height: auto !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  padding: 8px !important;
  transform: translateX(-50%) !important;
  border: 1px solid #ffffff1a !important;
  border-radius: 25px !important;
  background: linear-gradient(#12101c75, #09080f8f) !important;
  box-shadow: 0 16px 46px #0000005c, inset 0 1px #ffffff14 !important;
  backdrop-filter: blur(30px) saturate(160%) !important;
}
.ref-nav-item, .bnav-item, .jpjd-nav-item {
  display: flex !important;
  min-width: 0 !important;
  min-height: 54px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 8px 5px 7px !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: #aaa2b9 !important;
  background: transparent !important;
  font: 750 9px/1 "SF Pro Display", Inter, sans-serif !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  transition: .2s ease !important;
}
.jpjd-nav-item.active, .ref-nav-item.active, .bnav-item.active { color: #fff !important; background: linear-gradient(145deg, #fe2c5547, #25f4ee1f) !important; box-shadow: inset 0 1px #ffffff12 !important; }
.jpjd-nav-icon { display: grid; width: 34px; height: 30px; place-items: center; border-radius: 12px; }
.jpjd-nav-icon img { width: 19px; height: 19px; object-fit: contain; filter: brightness(1.45) saturate(.72); opacity: .78; }
.jpjd-nav-item.active .jpjd-nav-icon { color: #ffd1dc; background: #fe2c5533; }
.jpjd-nav-item.active .jpjd-nav-icon img { opacity: 1; filter: brightness(1.6) saturate(1) sepia(.3) hue-rotate(-10deg); }
.jpjd-nav-item[data-nav="vip"] .jpjd-nav-icon img { width: 29px; height: 25px; filter: none; }
.jpjd-nav-item[data-nav="vip"].active .jpjd-nav-icon img { filter: none; }

@media (max-width: 640px) {
  .mine-page, .task-page, .vip-page, .withdraw-page, .bind-page, .sub-page, .page, .lang-page, .team-page, .service-page, .pay-page, .record-page, .security-page { padding-left: 12px !important; padding-right: 12px !important; padding-bottom: 88px !important; }
  .mine-top-card, .task-hero, .vip-hero, .page-head { border-radius: 22px !important; }
  .task-stats, .mine-stat-grid, .benefit-grid { gap: 10px !important; }
  .quick-menu { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .quick-item { min-height: 110px; padding: 14px 8px !important; }
  .ref-nav, .bottom-nav, .jpjd-bottom-nav { bottom: max(5px, env(safe-area-inset-bottom)) !important; width: calc(100% - 18px) !important; height: 60px !important; padding: 4px !important; border-radius: 18px !important; }
  .ref-nav-item, .bnav-item, .jpjd-nav-item { min-height: 52px !important; gap: 2px !important; padding: 4px 2px !important; font-size: 8px !important; }
  .jpjd-nav-icon { width: 28px; height: 25px; }
  .jpjd-nav-icon img { width: 17px; height: 17px; }
  .jpjd-nav-item[data-nav="vip"] .jpjd-nav-icon img { width: 25px; height: 22px; }
}

@media (min-width: 520px) {
  html { background: #000000 !important; }
  body { box-shadow: 0 0 0 1px #ffffff12, 0 24px 70px #000000a0 !important; }
  .support-float { right: calc(50% - (var(--phone-frame-width) / 2) + 14px) !important; }
}

/* Home video stage: retain existing feed behavior while adopting reference composition. */
body:has(.home-page) { padding-bottom: 0 !important; }
.home-page { top: 0 !important; bottom: 0 !important; background: #000 !important; }
.home-page .slide { min-height: 100dvh !important; }
.home-page .feed { background: #000; }
.play-mask { background: radial-gradient(circle, #fe2c5529, transparent 48%); }
.play-icon { width: 64px !important; height: 64px !important; border: 1px solid #ffffff29 !important; background: #000000a8 !important; box-shadow: 0 16px 42px #000000a6, inset 0 1px #ffffff14 !important; backdrop-filter: blur(18px); }
.jpjd-home-brand { position: fixed; z-index: 1301; top: max(16px, env(safe-area-inset-top)); left: 16px; display: flex; align-items: center; min-height: 34px; padding: 6px 10px; border: 1px solid #ffffff1a; border-radius: 14px; background: #0000009c; box-shadow: 0 12px 32px #000000a6, inset 0 1px #ffffff12; backdrop-filter: blur(20px); pointer-events: none; }
.jpjd-home-brand img { display: block; width: 122px; height: auto; }
body:has(.home-page) .support-float { top: max(14px, env(safe-area-inset-top)) !important; right: 14px !important; min-height: 36px !important; padding: 8px 12px !important; }
@media (min-width: 520px) { body:has(.home-page) .support-float { right: calc(50% - (var(--phone-frame-width) / 2) + 14px) !important; } }

/* Exact-structure VIP Center rebuilt from the reference hierarchy. */
.vip-reference-page { width: min(100%, 600px); margin: 0 auto; padding: 20px 12px 114px; }
.reference-back { position: relative; z-index: 2; display: grid; width: 38px; height: 38px; place-items: center; margin: 0 0 -24px 2px; border: 1px solid #ffffff26; border-radius: 12px; background: #141418d9; color: #ffffff; font-size: 29px; line-height: 1; box-shadow: 0 10px 24px #000000a6, inset 0 1px #ffffff2b; cursor: pointer; }
.reference-title-ribbon { position: relative; display: flex; align-items: center; justify-content: center; min-height: 58px; margin: 0 28px 9px; overflow: hidden; border: 1px solid #fe2c5533; border-radius: 50%; background: radial-gradient(ellipse at 50% 0%, #fe2c5559, transparent 62%), linear-gradient(120deg, #141418d9, #1f141abd, #0f0f12ad); box-shadow: 0 14px 30px -21px #fe2c55cc, inset 0 1px #ffffff18; transform: skewX(-9deg); }
.reference-title-ribbon::after { content: ""; position: absolute; width: 62%; height: 1px; top: 9px; left: 19%; background: linear-gradient(90deg, transparent, #ffffff5e, transparent); transform: rotate(-4deg); }
.reference-title-ribbon h1 { position: relative; z-index: 1; margin: 0; color: #ffffff; font-size: 24px; font-weight: 850; letter-spacing: -.035em; text-shadow: 0 4px 20px #fe2c55b8; transform: skewX(9deg); }
.vip-current-reference-card { position: relative; display: flex; min-height: 168px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; margin-top: 10px; border: 1px solid #ffffff1f; border-radius: 23px; background: radial-gradient(55% 74% at 49% 16%, #fe2c5559, transparent 68%), radial-gradient(42% 90% at 95% 60%, #25f4ee29, transparent 76%), linear-gradient(146deg, #1a1a1fd9, #0a0a0dd9); box-shadow: 0 26px 58px #000000a6, inset 0 1px #ffffff17; }
.vip-current-reference-card::before { content: ""; position: absolute; width: 290px; height: 90px; top: -48px; border: 1px solid #ffffff3b; border-radius: 50%; transform: rotate(-12deg); box-shadow: 0 0 34px #fe2c5559; }
.vip-current-reference-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(130deg, #ffffff18, transparent 30%); }
.vip-current-aurora { position: absolute; width: 182px; height: 58px; top: 14px; border-radius: 50%; background: #fe2c5559; filter: blur(26px); }
.vip-current-crest { position: relative; z-index: 1; width: 76px; height: 64px; margin-bottom: 7px; object-fit: contain; filter: drop-shadow(0 12px 9px #0000008c); }
.vip-current-kicker { position: relative; z-index: 1; color: #ffffffa6; font-size: 8px; font-weight: 800; letter-spacing: .24em; }
.vip-current-name { position: relative; z-index: 1; margin-top: 4px; color: #fff; font-size: 21px; font-weight: 900; letter-spacing: -.035em; text-shadow: 0 5px 24px #fe2c55a6; }
.vip-reference-section-head { display: flex; align-items: center; gap: 7px; margin: 13px 1px 8px; color: #e5e5eac9; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.vip-reference-section-head::before { content: ""; width: 3px; height: 11px; border-radius: 2px; background: linear-gradient(#fe2c55, #25f4ee); box-shadow: 0 0 12px #fe2c55; }
.vip-reference-list { display: flex; flex-direction: column; gap: 9px; }
.vip-reference-skeleton { display: grid; gap: 9px; }
.vip-reference-skeleton i { display: block; height: 76px; border: 1px solid #ffffff14; border-radius: 15px; background: linear-gradient(100deg, #ffffff08, #fe2c5517, #ffffff08); }
.vip-reference-tier { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 86px 74px !important; min-height: 78px !important; width: 100% !important; align-items: center !important; gap: 5px !important; margin: 0 !important; padding: 12px 12px 11px 15px !important; overflow: hidden !important; border: 1px solid var(--tier-line, #ffffff20) !important; border-radius: 15px !important; text-align: left !important; color: #16151d !important; background: var(--tier-bg, linear-gradient(105deg,#e9ebf1,#a2a7b2)) !important; box-shadow: 0 13px 28px -18px #000000a3, inset 0 1px #ffffff9e !important; cursor: pointer !important; }
.vip-reference-tier::before { content: ""; position: absolute; z-index: 0; width: 45%; height: 170%; top: -28%; right: 19%; background: radial-gradient(ellipse, #ffffff8c, transparent 68%); filter: blur(10px); pointer-events: none; }
.vip-reference-tier > * { position: relative; z-index: 1; }
.vip-reference-tier-0 { --tier-bg: linear-gradient(105deg, #f4f5f7 0%, #d4d9e1 55%, #aab0ba 100%); --tier-line: #ffffff8a; }
.vip-reference-tier-1 { --tier-bg: linear-gradient(105deg, #d7fdfb 0%, #8ee9e4 45%, #25f4ee 100%); --tier-line: #25f4ee; }
.vip-reference-tier-2 { --tier-bg: linear-gradient(105deg, #ffb8c6 0%, #fe6a85 48%, #fe2c55 100%); --tier-line: #fe2c55; color: #ffffff !important; }
.vip-reference-tier-3 { --tier-bg: linear-gradient(105deg, #ffe98c 0%, #fe2c55 48%, #d99812 100%); --tier-line: #ffe7a0; }
.vip-reference-tier-4, .vip-reference-tier-5 { --tier-bg: linear-gradient(105deg, #2a2a2e 0%, #16161a 54%, #0a0a0d 100%); --tier-line: #e8c547; color: #ff6a8a !important; }
.vip-reference-tier-4::before, .vip-reference-tier-5::before { background: radial-gradient(ellipse, #e8c5477a, transparent 68%); }
.vip-reference-tier.current { outline: 2px solid #ffffffbd; outline-offset: 0; }
.vip-tier-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.vip-tier-name { font-size: 18px; font-weight: 950; line-height: 1; letter-spacing: -.03em; }
.vip-tier-tag { margin-top: 5px; font-size: 8px; font-weight: 850; line-height: 1; letter-spacing: .24em; opacity: .74; }
.vip-tier-level { display: inline-flex; min-height: 15px; align-items: center; margin-top: 8px; padding: 0 7px; border-radius: 5px; background: #11121bba; color: #fff; font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.vip-tier-4 .vip-tier-level, .vip-reference-tier-5 .vip-tier-level { background: #f8e2a233; border: 1px solid #f3d58f4a; color: #faedca; }
.vip-tier-crest { width: 74px; height: 58px; object-fit: contain; filter: drop-shadow(0 10px 6px #1c152780); }
.vip-tier-price { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
.vip-tier-price strong { font-size: 12px; font-weight: 950; line-height: 1; }
.vip-tier-price em { font-size: 7px; font-style: normal; font-weight: 900; line-height: 1; letter-spacing: .12em; opacity: .76; text-transform: uppercase; }
.vip-reference-tier-4 .vip-tier-price, .vip-reference-tier-5 .vip-tier-price { color: #f7e5ae; }
.vip-reference-disclaimer { margin: 13px 5px 22px; color: #86868b; font-size: 10px; line-height: 1.55; text-align: center; }
.vip-reference-footer { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 4px; padding: 17px 12px; border-top: 1px solid #ffffff12; color: #86868b; font-size: 9px; text-align: center; }
.vip-reference-footer img { width: 112px; height: auto; }
@media (max-width: 420px) { .vip-reference-page { padding: 14px 10px 100px; } .reference-title-ribbon { min-height: 54px; margin: 0 25px 9px; } .vip-current-reference-card { min-height: 154px; } .vip-reference-tier { grid-template-columns: minmax(0, 1fr) 72px 64px !important; min-height: 73px !important; padding-left: 13px !important; } .vip-tier-crest { width: 62px; height: 53px; } .vip-tier-name { font-size: 17px; } .vip-tier-price strong { font-size: 11px; } }

/* Exact-structure Profile rebuilt from the reference hierarchy. */
.profile-reference-page { width: min(100%, 600px); margin: 0 auto; padding: 20px 12px 114px; }
.profile-reference-identity { position: relative; display: flex; min-height: 106px; align-items: center; gap: 14px; overflow: hidden; padding: 18px 18px; border: 1px solid #ffffff1f; border-radius: 22px; background: radial-gradient(circle at 95% 120%, #25f4ee36, transparent 47%), radial-gradient(circle at 8% 4%, #fe2c5557, transparent 58%), linear-gradient(145deg, #1a1a1fde, #0a0a0ddc); box-shadow: 0 23px 55px #000000a6, inset 0 1px #ffffff17; }
.profile-reference-identity::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(128deg, #ffffff15, transparent 33%); }
.profile-identity-orb { position: relative; z-index: 1; display: grid; width: 62px; height: 62px; flex: 0 0 62px; place-items: center; overflow: hidden; border: 1px solid #ffffff40; border-radius: 50%; background: conic-gradient(from 210deg, #25f4ee, #fe2c55, #ff82ad, #25f4ee); box-shadow: 0 12px 24px #00000052, inset 0 1px #ffffff40; }
.profile-identity-orb::after { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: #141418e3; }
.profile-identity-icon { position: relative; z-index: 1; width: 24px; height: 24px; filter: brightness(1.8) saturate(.35); }
.profile-reference-avatar { position: absolute; z-index: 2; width: 46px; height: 46px; margin-left: 8px; border: 1px solid #ffffff40; border-radius: 50%; object-fit: cover; opacity: .12; filter: saturate(.45); pointer-events: none; }
.profile-identity-copy { position: relative; z-index: 2; min-width: 0; }
.profile-identity-name { overflow: hidden; color: #fff; font-size: 20px; font-weight: 900; line-height: 1.1; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.profile-identity-sub { display: flex; align-items: center; gap: 10px; margin-top: 5px; color: #e5e5ea; font-size: 11px; font-weight: 700; }
.profile-identity-sub img { width: 22px; height: 17px; object-fit: contain; }
.profile-identity-id { margin-top: 6px; color: #86868b; font-size: 9px; letter-spacing: .06em; }
.profile-reference-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.profile-reference-stat { display: flex; min-height: 70px; min-width: 0; flex-direction: column; align-items: center; justify-content: center; padding: 8px 6px; border: 1px solid #ffffff18; border-radius: 15px; background: linear-gradient(145deg, #ffffff11, #ffffff07); box-shadow: inset 0 1px #ffffff14, 0 10px 25px -21px #000; text-align: center; }
.profile-reference-stat:nth-child(1) { background: linear-gradient(145deg, #fe2c5547, #1a1a1fbf); }
.profile-reference-stat:nth-child(2) { background: linear-gradient(145deg, #25f4ee33, #1a1a1fbb); }
.profile-reference-stat:nth-child(3) { background: linear-gradient(145deg, #e8c54736, #1a1a1fbd); }
.profile-reference-stat span { color: #e5e5eab0; font-size: 7px; font-weight: 850; letter-spacing: .17em; }
.profile-reference-stat strong { display: block; max-width: 100%; margin-top: 9px; overflow: hidden; color: #fff; font-size: 15px; font-weight: 900; line-height: 1; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.profile-reference-stat small { display: block; max-width: 100%; margin-top: 5px; overflow: hidden; color: #86868b; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.profile-reference-menu { overflow: hidden; margin-top: 18px; border: 1px solid #ffffff1f; border-radius: 14px; background: linear-gradient(145deg, #16161ae8, #0a0a0def); box-shadow: 0 20px 48px #000000a6, inset 0 1px #ffffff11; }
.profile-menu-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 12px; width: 100%; min-height: 51px; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-bottom: 1px solid #ffffff12; background: transparent; color: #f2eeff; font-family: inherit; text-align: left; cursor: pointer; }
.profile-menu-row:last-child { border-bottom: 0; }
.profile-menu-row:active { background: #ffffff0a; }
.profile-menu-icon { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #ffffff26; border-radius: 10px; box-shadow: inset 0 1px #ffffff35, 0 6px 14px -11px #000; }
.profile-menu-icon img { width: 16px; height: 16px; filter: brightness(1.8) saturate(.35); }
.icon-gold { background: linear-gradient(145deg, #e8c547, #a47a18); }.icon-green { background: linear-gradient(145deg, #25f4ee, #0d7a76); }.icon-purple { background: linear-gradient(145deg, #fe2c55, #8f1830); }.icon-blue { background: linear-gradient(145deg, #25f4ee, #0d7a76); }.icon-rose { background: linear-gradient(145deg, #fe2c55, #8f1830); }.icon-cyan { background: linear-gradient(145deg, #25f4ee, #0d7a76); }.icon-indigo { background: linear-gradient(145deg, #25f4ee, #0d7a76); }.icon-violet { background: linear-gradient(145deg, #fe2c55, #8f1830); }.icon-red { background: linear-gradient(145deg, #fe2c55, #8f1830); }
.profile-menu-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.profile-menu-copy b { overflow: hidden; color: #ffffff; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-copy small { overflow: hidden; color: #86868b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-value { max-width: 96px; overflow: hidden; color: #25f4ee; font-size: 10px; font-weight: 650; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-arrow { color: #e5e5ea; font-size: 20px; font-weight: 300; line-height: 1; }
.profile-menu-danger .profile-menu-copy b, .profile-menu-danger .profile-menu-arrow { color: #fe2c55; }
.profile-reference-region-panel { display: none; padding: 11px; border-bottom: 1px solid #ffffff12; background: #ffffff07; }
.profile-reference-region-panel.open { display: block; }
.profile-reference-region-panel .region-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-reference-region-panel .region-chip { border: 1px solid #ffffff19; border-radius: 10px; background: #ffffff0a; color: #ffffff; }
.profile-reference-region-panel .region-chip.active { background: linear-gradient(135deg, #fe2c5566, #25f4ee40) !important; }
.profile-reference-ticker { margin-top: 14px; padding: 14px 13px; border: 1px solid #ffffff18; border-radius: 15px; background: linear-gradient(145deg, #16161ae8, #0a0a0dee); box-shadow: 0 18px 40px #000000a6, inset 0 1px #ffffff11; }
.profile-ticker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #ffffff; font-size: 11px; }.profile-ticker-head span { color: #25f4ee; font-size: 9px; font-weight: 800; }
.profile-reference-ticker .ticker-item { grid-template-columns: 26px minmax(0, 1fr) auto auto; border-radius: 10px !important; padding: 8px !important; }.profile-reference-ticker .ticker-avatar { width: 24px; height: 24px; }.profile-reference-ticker .ticker-user { font-size: 10px !important; }.profile-reference-ticker .ticker-amount { font-size: 11px !important; }.profile-reference-ticker .ticker-time { font-size: 9px !important; }
.profile-service-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.profile-reference-footer { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; padding: 17px 12px; border-top: 1px solid #ffffff12; color: #86868b; font-size: 9px; text-align: center; }.profile-reference-footer img { width: 112px; height: auto; }
@media (max-width: 420px) { .profile-reference-page { padding: 14px 10px 100px; }.profile-reference-identity { min-height: 98px; padding: 16px; }.profile-reference-stat { min-height: 66px; }.profile-reference-stat strong { font-size: 13px; }.profile-menu-row { min-height: 49px; padding: 7px 10px; }.profile-menu-value { max-width: 78px; } }

/* Reference-like home chrome: only visual shells; video task logic stays in index.html. */
.jpjd-home-chrome { position: fixed; z-index: 1600; top: max(14px, env(safe-area-inset-top)); left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.jpjd-home-wordmark { display: inline-flex; align-items: center; pointer-events: auto; }
.jpjd-home-wordmark img { display: block; width: 130px; height: auto; filter: drop-shadow(0 6px 18px #00000099); }
.jpjd-home-actions { display: flex; align-items: center; gap: 7px; pointer-events: auto; }
.jpjd-home-balance, .jpjd-home-menu { display: inline-flex; height: 34px; align-items: center; gap: 5px; padding: 0 11px; border: 1px solid #ffffff24; border-radius: 10px; background: #000000b5; box-shadow: 0 8px 18px #000000a6, inset 0 1px #ffffff12; color: #ffffff; font-size: 10px; font-weight: 800; text-decoration: none; backdrop-filter: blur(20px); }
.jpjd-home-balance img { width: 13px; height: 13px; filter: brightness(1.8) saturate(.4); }
.jpjd-home-menu { width: 34px; justify-content: center; padding: 0; }
.jpjd-home-menu i, .jpjd-home-menu i::before, .jpjd-home-menu i::after { display: block; width: 15px; height: 1.5px; border-radius: 2px; background: #ffffff; content: ""; }
.jpjd-home-menu i { position: relative; }.jpjd-home-menu i::before { position: absolute; top: -5px; left: 0; }.jpjd-home-menu i::after { position: absolute; top: 5px; left: 0; }
.jpjd-home-chrome .support-float { position: relative !important; top: auto !important; right: auto !important; display: inline-flex !important; min-height: 34px !important; padding: 0 12px !important; border-color: #ffffff24 !important; border-radius: 10px !important; background: #000000b5 !important; box-shadow: 0 8px 18px #000000a6, inset 0 1px #ffffff12 !important; color: #ffffff !important; backdrop-filter: blur(20px); }
.jpjd-home-chrome .support-float::before { display: none !important; }.jpjd-home-chrome .support-float-text { color: transparent !important; font-size: 0 !important; }.jpjd-home-chrome .support-float-text::after { content: "Support"; color: #ffffff; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.jpjd-home-rail { position: fixed; z-index: 1500; right: 18px; bottom: 104px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: #ffffff; pointer-events: none; }
.jpjd-home-rail-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-shadow: 0 2px 9px #000; }.jpjd-home-rail-icon { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid #ffffff1d; border-radius: 50%; background: #00000091; box-shadow: 0 7px 20px #000000a6, inset 0 1px #ffffff12; backdrop-filter: blur(17px); }.jpjd-home-rail-icon img { width: 18px; height: 18px; filter: brightness(1.8) saturate(.3); }.jpjd-home-rail-item small { color: #ffffff; font-size: 10px; font-weight: 800; }
body:has(.home-page) .jpjd-home-brand { display: none !important; }
body:has(.home-page) .support-float:not(.jpjd-home-chrome .support-float) { display: none !important; }
@media (min-width: 520px) { body:has(.home-page) { width: 100% !important; max-width: none !important; margin: 0 !important; box-shadow: none !important; } body:has(.home-page) .ref-nav, body:has(.home-page) .jpjd-bottom-nav { width: 470px !important; } }
@media (max-width: 519px) { .jpjd-home-chrome { left: 14px; right: 14px; }.jpjd-home-wordmark img { width: 112px; }.jpjd-home-actions { gap: 5px; }.jpjd-home-balance { display: none; }.jpjd-home-rail { right: 11px; bottom: 89px; gap: 10px; }.jpjd-home-rail-icon { width: 33px; height: 33px; }.jpjd-home-rail-item small { font-size: 9px; } }

/* Ensure the real support button becomes a normal member of the home top bar. */
.jpjd-home-chrome #support-float { position: static !important; inset: auto !important; transform: none !important; float: none !important; margin: 0 !important; width: auto !important; height: 34px !important; min-height: 34px !important; padding: 0 12px !important; align-self: center !important; }
.jpjd-home-support-slot { display: inline-flex; align-items: center; justify-content: center; }

/* SVG files are image resources, so force a bright monochrome treatment over the black video stage. */
.jpjd-nav-icon img, .jpjd-home-rail-icon img, .jpjd-home-balance img { filter: invert(1) brightness(2.4) saturate(.2) !important; }
.jpjd-nav-item.active .jpjd-nav-icon img { filter: invert(1) brightness(2.7) sepia(.1) saturate(1.8) hue-rotate(218deg) !important; }
.jpjd-nav-item[data-nav="vip"] .jpjd-nav-icon img, .jpjd-nav-item[data-nav="vip"].active .jpjd-nav-icon img { filter: none !important; }

/* Login / register view */
.login-wrap { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 28px 14px 32px; background: radial-gradient(70% 44% at 50% 0, #fe2c5520, transparent 75%), var(--page-background) !important; }
.login-logo { display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.login-logo img { width: 144px !important; height: auto; filter: drop-shadow(0 10px 24px #fe2c5540); }
.login-box { width: min(100%, 390px); padding: 22px 18px 20px; border: 1px solid #ffffff1f !important; border-radius: 26px !important; background: linear-gradient(155deg, #16161aed, #0a0a0df2) !important; box-shadow: 0 30px 70px #000000a6, inset 0 1px #ffffff18 !important; backdrop-filter: blur(24px); }
.login-title { font-size: 26px !important; font-weight: 900 !important; letter-spacing: -.04em; text-align: center; text-shadow: 0 5px 22px #fe2c5566; }
.login-sub { margin-top: 6px; font-size: 11px !important; text-align: center; }
.login-tabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 5px; margin: 19px 0 15px; padding: 4px; border: 1px solid #ffffff16; border-radius: 14px; background: #ffffff08; }
.login-tab { min-height: 36px; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #86868b !important; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.login-tab.on { background: linear-gradient(135deg, #fe2c55, #c91f44) !important; color: #fff !important; box-shadow: 0 8px 18px #fe2c5559, inset 0 1px #ffffff3d; }
.btn-tg { display: flex !important; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #25f4ee40 !important; border-radius: 13px !important; background: linear-gradient(135deg, #0d7a76, #0a5a56) !important; color: #fff !important; font-weight: 800; box-shadow: 0 12px 28px #25f4ee29, inset 0 1px #ffffff42 !important; }
.btn-tg img { width: 20px !important; height: 20px; object-fit: contain; }
.divider { display: flex; align-items: center; gap: 10px; margin: 15px 0; color: #86868b !important; font-size: 10px; text-align: center; }.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: #ffffff19; }
.login-status { min-height: 16px; margin: 0 0 7px; color: #fe2c55; font-size: 10px; text-align: center; }
.login-box .form-group { margin: 0 0 13px; }.login-box .form-label { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 800; }.login-box .form-input { width: 100%; min-height: 44px; box-sizing: border-box; }.login-box .btn-primary { width: 100%; min-height: 44px; margin-top: 2px; }