/*
 * H5 visual layer — designed to preserve existing business DOM and scripts.
 * Reference: jpjd.live dark glass interface.
 */
:root {
  --ui-bg: #08070c;
  --ui-bg-deep: #0b0913;
  --ui-ink: #f4f0ff;
  --ui-ink-soft: #d9d2ed;
  --ui-muted: #a8a1b9;
  --ui-dim: #ffffff73;
  --ui-line: #ffffff1a;
  --ui-line-strong: #ffffff29;
  --ui-glass: #12111cb8;
  --ui-glass-strong: #14131fe0;
  --ui-panel: linear-gradient(160deg, #1e163adb, #0e0b1ce6);
  --ui-panel-soft: linear-gradient(155deg, #18142cf5, #0b0a16f5);
  --ui-shadow: 0 18px 42px -28px #000000d9;
  --ui-purple: #8f72ff;
  --ui-purple-soft: #9e6aff3d;
  --ui-blue: #6d98ff;
  --ui-coral: #ff8295;
  --ui-pink: #f4678d;
  --ui-teal: #46d5c4;
  --ui-gold: #e0b85d;
  --ui-gold-soft: #f6df9a;
  --ui-focus: #b286ffbf;
  --page-background: radial-gradient(circle at 78% -6%, rgb(239 90 134 / 26%), transparent 46%), radial-gradient(circle at 8% 12%, rgb(124 92 214 / 20%), transparent 42%), var(--ui-bg);
  --phone-frame-width: 430px;
  --bg: var(--ui-bg);
  --bg-soft: #12101c;
  --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-purple);
  --gold-deep: #6557e8;
  --accent: var(--ui-purple);
  --accent-ink: #fff;
  --navy: #17112d;
  --navy-soft: #27205a;
  --shadow: var(--ui-shadow);
  --shadow-md: 0 24px 66px #0000007a;
}

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(255 115 152 / 8%), transparent 70%), radial-gradient(48% 30% at 4% 14%, rgb(124 92 214 / 9%), transparent 72%); }
* { scrollbar-color: #8f72ff70 #ffffff0b; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: #ffffff08; }
*::-webkit-scrollbar-thumb { background: #8f72ff85; border-radius: 999px; }
a { color: inherit; }
img { max-width: 100%; }

/* Loading and notification layers */
#toast { z-index: 9999 !important; border: 1px solid #c9b6ff52 !important; border-radius: 16px !important; background: #161226ed !important; color: var(--ui-ink) !important; box-shadow: 0 18px 55px #0000007a, inset 0 1px #ffffff1a !important; backdrop-filter: blur(22px) !important; }
#loading { z-index: 9998 !important; background: #09070bcf !important; backdrop-filter: blur(10px) !important; }
.spinner { border-color: #ffffff1a !important; border-top-color: var(--ui-purple) !important; box-shadow: 0 0 24px #8f72ff73 !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 #c4a8ff38 !important; border-radius: 26px !important; background: radial-gradient(120% 130% at 12% 0, #7e56dc38, transparent 62%), radial-gradient(120% 130% at 100% 100%, #4a68e62e, transparent 65%), var(--ui-panel-soft) !important; box-shadow: 0 26px 60px #00000080, 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 #c4a8ff47 !important; border-radius: 14px !important; background: linear-gradient(135deg, #8b5cf64a, #38bdf830) !important; color: var(--ui-ink) !important; box-shadow: 0 12px 28px #00000047, inset 0 1px #fff3 !important; }
.page-back img, .back-btn img { filter: brightness(4) saturate(0) hue-rotate(170deg); }

/* 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 #c4a8ff73 !important; background: linear-gradient(145deg, #8b5cf666, #38bdf83d) !important; box-shadow: 0 12px 28px #00000047, inset 0 1px #fff3 !important; }
.mine-name { text-shadow: 0 4px 18px #8f72ff4d; }
.mine-action, .mine-stat-pill, .reward-btn, .plan-btn, .submit-btn, .btn-primary, .task-btn.claim, .chip.on, .type-btn.on, .region-chip.active { border: 1px solid #d3b6ff47 !important; border-radius: 14px !important; background: linear-gradient(135deg, #b267ff, #6557e8) !important; color: #fff !important; box-shadow: 0 12px 28px #8b5cf647, inset 0 1px #ffffff3d !important; }
.btn-dark, .task-btn.play { border: 1px solid #c4a8ff47 !important; background: linear-gradient(135deg, #2a204a, #151228) !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 #c4a8ff3d !important;
  background: linear-gradient(145deg, #8b5cf666, #38bdf83d) !important;
  box-shadow: inset 0 1px #fff3, 0 10px 22px -14px #7c3aede6 !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: #b286ffbf !important; box-shadow: 0 0 0 3px #8b5cf62e !important; background: #ffffff12 !important; }
input::placeholder, textarea::placeholder { color: #d6ceff80 !important; }
.modal-overlay, .drawer-overlay { background: #09070b9e !important; backdrop-filter: blur(7px) !important; }
.modal-box { border-radius: 24px 24px 0 0 !important; background: linear-gradient(160deg, #201937fa, #0e0b1cfb) !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, #e6d4ff 48%, #9fe6ff) !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, #ff4fa3, #a855f7) !important; box-shadow: 0 0 18px #a855f780; }
.task-item { padding: 14px !important; }
.task-item:hover, .quick-item:hover, .sec-item:hover, .record-card:hover { border-color: #c4a8ff59 !important; transform: translateY(-1px); }
.task-thumb, .task-thumb-empty { border: 1px solid #ffffff17; background: linear-gradient(135deg, #2c1c50, #101426) !important; }
.task-badges span, .vip-meta span, .plan-badge, .status-chip, .badge { border: 1px solid #c4a8ff38 !important; border-radius: 999px !important; background: #8b5cf61c !important; color: #e6dcff !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, #8f72ff2b, transparent 62%), 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: #6de0d4; --tier-bg: linear-gradient(145deg, #243642, #142329); --tier-line: #5ce0d747; padding: 16px !important; background: radial-gradient(circle at 100% 0, #3ecdc52e, transparent 55%), var(--tier-bg) !important; border-color: var(--tier-line) !important; box-shadow: 0 24px 65px #10788552, inset 0 1px #ffffff29 !important; }
.plan-list .plan-card:nth-child(2) { --tier-accent: #aeb5ff; --tier-bg: linear-gradient(145deg, #33304e, #1a2039); --tier-line: #8e97ff4d; }
.plan-list .plan-card:nth-child(3) { --tier-accent: #d7a7ff; --tier-bg: linear-gradient(145deg, #412d55, #1f1d3a); --tier-line: #cd8bff5c; }
.plan-list .plan-card:nth-child(4) { --tier-accent: #ffd28a; --tier-bg: linear-gradient(145deg, #4a3b29, #251f19); --tier-line: #f3bc5d57; }
.plan-list .plan-card:nth-child(n+5) { --tier-accent: #ffb1c5; --tier-bg: linear-gradient(145deg, #432b36, #241821); --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, #9e6aff3d, #5b77ff1f) !important; border-color: #c4a8ff70 !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 #c4a8ff38 !important; background: #8b5cf61c !important; color: #d8c6ff !important; }
.lang-entry-arrow, .region-entry-arrow, .sec-item-arrow { color: #d8c6ff !important; background: #ffffff0b !important; }
.quick-menu { gap: 12px !important; }
.quick-item { min-height: 118px; }
.ticker-card { background: linear-gradient(160deg, #1e163adb, #0e0b1ce6) !important; }
.ticker-live { color: #6de0d4 !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 #c4a8ff38 !important; background: radial-gradient(110% 130% at 12% 0, #7e56dc38, transparent 64%), var(--ui-panel-soft) !important; box-shadow: 0 26px 60px #00000080, 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: #e6dcff !important; }
.badge-0 { background: #8b5cf629 !important; color: #e6dcff !important; }
.badge-1 { background: #46d5c429 !important; color: #bafff2 !important; }
.badge-2 { background: #ff829529 !important; color: #ffe0ed !important; }
.badge-5 { background: #6d98ff29 !important; color: #d4e0ff !important; }
.upload-box, .upload-preview, .pay-qr { border-color: #c4a8ff47 !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, #9e6aff3d, #5b77ff1f) !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 #c4a8ff52 !important; background: linear-gradient(135deg, #b267ff, #6557e8) !important; color: #fff !important; box-shadow: 0 12px 28px #8b5cf64d, inset 0 1px #fff3 !important; animation: none !important; }
.support-float::before { border-color: #fff3 !important; }
.login-wrap { background: radial-gradient(circle at 78% -6%, rgb(239 90 134 / 24%), transparent 45%), radial-gradient(circle at 8% 12%, rgb(124 92 214 / 22%), transparent 42%), var(--ui-bg) !important; }
.login-box { border: 1px solid #c4a8ff38 !important; border-radius: 28px !important; background: linear-gradient(160deg, #1e163aed, #0e0b1cf2) !important; box-shadow: 0 28px 75px #0000004d, 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, #9e6aff3d, #5b77ff1f) !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, #9e6aff3d, #5b77ff1f) !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: #c8adff; background: #9d68ff2b; }
.jpjd-nav-item.active .jpjd-nav-icon img { opacity: 1; filter: brightness(1.55) saturate(.65) sepia(.1); }
.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: #05050a !important; }
  body { box-shadow: 0 0 0 1px #ffffff12, 0 24px 70px #00000073 !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, #8f72ff2b, transparent 48%); }
.play-icon { width: 64px !important; height: 64px !important; border: 1px solid #ffffff29 !important; background: #12111ca8 !important; box-shadow: 0 16px 42px #00000073, 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: #12111c9c; box-shadow: 0 12px 32px #00000059, 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 #d7c4ff61; border-radius: 12px; background: #18122ad9; color: #f5efff; font-size: 29px; line-height: 1; box-shadow: 0 10px 24px #00000061, 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 #c8aeff2e; border-radius: 50%; background: radial-gradient(ellipse at 50% 0%, #9c72ff55, transparent 62%), linear-gradient(120deg, #1a1631d9, #29153bbd, #18132bad); box-shadow: 0 14px 30px -21px #bb91ffcc, 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: #faf6ff; font-size: 24px; font-weight: 850; letter-spacing: -.035em; text-shadow: 0 4px 20px #a77affb8; 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 #c9aeff3b; border-radius: 23px; background: radial-gradient(55% 74% at 49% 16%, #b286ff58, transparent 68%), radial-gradient(42% 90% at 95% 60%, #6b85ff2e, transparent 76%), linear-gradient(146deg, #28184dd9, #0d0a1bd9); box-shadow: 0 26px 58px #00000073, inset 0 1px #ffffff17; }
.vip-current-reference-card::before { content: ""; position: absolute; width: 290px; height: 90px; top: -48px; border: 1px solid #e2d1ff3b; border-radius: 50%; transform: rotate(-12deg); box-shadow: 0 0 34px #9b69ff4d; }
.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: #d5c1ff62; 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: #e0d5f4a6; 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 #ab7eff9e; }
.vip-reference-section-head { display: flex; align-items: center; gap: 7px; margin: 13px 1px 8px; color: #e7def9c9; 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(#8e71ff, #49bdfa); box-shadow: 0 0 12px #9c79ff; }
.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, #9d6bff17, #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, #ebdcff 0%, #cfb8f7 45%, #b996ef 100%); --tier-line: #ead8ff; }
.vip-reference-tier-2 { --tier-bg: linear-gradient(105deg, #ffc48f 0%, #efa06f 48%, #d16f60 100%); --tier-line: #ffc990; }
.vip-reference-tier-3 { --tier-bg: linear-gradient(105deg, #ffe98c 0%, #f6c944 48%, #d99812 100%); --tier-line: #ffe7a0; }
.vip-reference-tier-4, .vip-reference-tier-5 { --tier-bg: linear-gradient(105deg, #4a4b4e 0%, #252526 54%, #101111 100%); --tier-line: #8a7e51; color: #f7f3e4 !important; }
.vip-reference-tier-4::before, .vip-reference-tier-5::before { background: radial-gradient(ellipse, #c5a34b7a, 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: #c7bfda92; 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: #c8c0d294; 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 #c9aeff3b; border-radius: 22px; background: radial-gradient(circle at 95% 120%, #5c8dff5c, transparent 47%), radial-gradient(circle at 8% 4%, #9d6bff57, transparent 58%), linear-gradient(145deg, #231a42de, #10101bdc); box-shadow: 0 23px 55px #00000075, 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 #d6c4ff73; border-radius: 50%; background: conic-gradient(from 210deg, #6b8cff, #8148dc, #ff82ad, #618dff); box-shadow: 0 12px 24px #00000052, inset 0 1px #ffffff40; }
.profile-identity-orb::after { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: #16152ae3; }
.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 #e3d4ff91; 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: 5px; margin-top: 5px; color: #e1d9f5; font-size: 11px; font-weight: 700; }
.profile-identity-sub img { width: 22px; height: 17px; object-fit: contain; }
.profile-identity-id { margin-top: 6px; color: #cfc6e495; 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, #40598c92, #1b2140bf); }
.profile-reference-stat:nth-child(2) { background: linear-gradient(145deg, #5338448f, #2a182bbb); }
.profile-reference-stat:nth-child(3) { background: linear-gradient(145deg, #2d5c5791, #192e31bd); }
.profile-reference-stat span { color: #e0d9efb0; 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: #d7d0e89e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.profile-reference-menu { overflow: hidden; margin-top: 18px; border: 1px solid #c5adff32; border-radius: 14px; background: linear-gradient(145deg, #19132ce8, #0e0c18ef); box-shadow: 0 20px 48px #00000067, 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, #e4ba58, #a47a18); }.icon-green { background: linear-gradient(145deg, #4bd4ad, #198871); }.icon-purple { background: linear-gradient(145deg, #a463f5, #6530bd); }.icon-blue { background: linear-gradient(145deg, #62a8ff, #2760bc); }.icon-rose { background: linear-gradient(145deg, #fc7598, #b93162); }.icon-cyan { background: linear-gradient(145deg, #4fcadb, #167b96); }.icon-indigo { background: linear-gradient(145deg, #7889ff, #414fbe); }.icon-violet { background: linear-gradient(145deg, #bf75fd, #7338d0); }.icon-red { background: linear-gradient(145deg, #fa7792, #ae2f48); }
.profile-menu-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.profile-menu-copy b { overflow: hidden; color: #f4f0ff; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-copy small { overflow: hidden; color: #b8b0caac; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-value { max-width: 96px; overflow: hidden; color: #cfb8ff; font-size: 10px; font-weight: 650; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-arrow { color: #f3effc; font-size: 20px; font-weight: 300; line-height: 1; }
.profile-menu-danger .profile-menu-copy b, .profile-menu-danger .profile-menu-arrow { color: #ffb3c3; }
.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: #f4f0ff; }
.profile-reference-region-panel .region-chip.active { background: linear-gradient(135deg, #9e6aff64, #5b77ff42) !important; }
.profile-reference-ticker { margin-top: 14px; padding: 14px 13px; border: 1px solid #ffffff18; border-radius: 15px; background: linear-gradient(145deg, #17122be8, #0c0b15ee); box-shadow: 0 18px 40px #0000005c, inset 0 1px #ffffff11; }
.profile-ticker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #f2efff; font-size: 11px; }.profile-ticker-head span { color: #61ddcf; 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: #c8c0d294; 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: #111019b5; box-shadow: 0 8px 18px #00000057, inset 0 1px #ffffff12; color: #f8f6ff; 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: #f5f1ff; 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: #111019b5 !important; box-shadow: 0 8px 18px #00000057, inset 0 1px #ffffff12 !important; color: #f8f6ff !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: #f8f6ff; 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: #f7f2ff; 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: #11101991; box-shadow: 0 7px 20px #00000066, 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: #f6f2ff; 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, #8f72ff27, 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 #8f72ff38); }
.login-box { width: min(100%, 390px); padding: 22px 18px 20px; border: 1px solid #c4a8ff38 !important; border-radius: 26px !important; background: linear-gradient(155deg, #201735ed, #0d0b18f2) !important; box-shadow: 0 30px 70px #00000085, 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 #8f72ff60; }
.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: #c8c0d2 !important; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.login-tab.on { background: linear-gradient(135deg, #b267ff, #6557e8) !important; color: #fff !important; box-shadow: 0 8px 18px #8b5cf647, 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 #50a9e64f !important; border-radius: 13px !important; background: linear-gradient(135deg, #2588c9, #2360a7) !important; color: #fff !important; font-weight: 800; box-shadow: 0 12px 28px #1e73af38, 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: #bcb4cba8 !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: #c4b2ff; 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; }