/* ============================================================
   REUSABLE COMPONENTS
   ============================================================ */

.section-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 2px;
}

.section-sub {
  font-size: 10px;
  color: var(--text-secondary);
}

/* ---- hero balance card ---- */
.hero-card {
  background: linear-gradient(160deg, rgb(34 125 197 / 16%), rgb(34 107 197 / 3%) 60%);
  border: 1px solid rgb(61 102 175 / 75%);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 28px -14px rgb(61 122 175 / 50%);
}

.hero-card .eyebrow {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-card .amount {
  font-size: 20px;
  font-weight: 800;
  margin-top: 6px;
}

.hero-card .sub-amount {
  font-size: 12px;
  color: var(--accent-green);
  margin-top: 2px;
}

.hero-card .hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.hero-card .hero-actions .btn {
  flex: 1;
}

.hero-illustration {
  position: absolute;
  right: -10px;
  top: -10px;
  width: 130px;
  opacity: .9;
}

/* ---- generic row list (transactions / income history) ---- */
.row-list {
  display: flex;
  flex-direction: column;
}

.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}

.row-item:last-child {
  border-bottom: none;
}

.row-item .ri-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-item .ri-icon svg {
  width: 18px;
  height: 18px;
}

.row-item .ri-mid {
  flex: 1;
  min-width: 0;
}

.row-item .ri-title {
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.row-item .ri-time {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.row-item .ri-right {
  text-align: right;
  flex-shrink: 0;
}

.row-item .ri-amount {
  font-size: 13.5px;
  font-weight: 800;
}

.row-item .ri-status {
  font-size: 11px;
  color: var(--brand-green);
  font-weight: 600;
  margin-top: 2px;
}

.row-item .ri-status.pending {
  color: var(--accent-orange);
}

.row-item .chev {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

.px-card {
  padding: 18px 20px;
}

/* ---- income tile grid ---- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 20px 18px;
}

.tile {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px;
  transition: border-color .2s ease, transform .2s ease;
}

.tile:hover {
  border-color: var(--card-border-strong);
  transform: translateY(-2px);
}

.tile .icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  margin-bottom: 8px;
}

.tile .icon-badge svg {
  width: 15px;
  height: 15px;
}

.tile .t-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

.tile .t-value {
  font-size: 15px;
  font-weight: 800;
  margin-top: 2px;
}

.tile .t-delta {
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ---- bar chart ---- */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 150px;
  padding: 16px 20px 0;
}

.bar-chart .bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.bar-chart .bar {
  width: 100%;
  max-width: 26px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--brand-green-bright), var(--brand-green-dim));
}

.bar-chart .bar-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.bar-chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 0 6px 0 20px;
  height: 150px;
}

/* ---- donut ---- */
.donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut {
  --pct: 135;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: conic-gradient(var(--brand-green-bright) calc(var(--pct)*1%), var(--input-bg) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  filter: drop-shadow(0 0 14px rgba(46, 232, 120, .28));
}

.donut::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--bg);
}

.donut .donut-label {
  position: relative;
  text-align: center;
}

.donut .donut-label b {
  display: block;
  font-size: 22px;
  font-weight: 800;
}

.donut .donut-label span {
  font-size: 8.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* ---- team tree ---- */
.team-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 4px;
}

.tt-root {
  text-align: center;
}

.tt-root img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--brand-green);
  object-fit: cover;
}

.tt-root .tag {
  margin-top: 6px;
}

.tt-branches {
  display: flex;
  width: 100%;
  gap: 14px;
  justify-content: space-between;
}

.tt-branch {
  flex: 1;
  text-align: center;
}

.tt-branch-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.tt-avatars {
  display: flex;
  justify-content: center;
}

.tt-avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  object-fit: cover;
  margin-left: -10px;
}

.tt-avatars img:first-child {
  margin-left: 0;
}

.tt-more {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-left: -10px;
  border: 2px solid var(--card-bg);
  color: var(--text-secondary);
}

/* ---- country rows ---- */
.country-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 20px 20px;
}

.country-tile {
  text-align: center;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px 4px;
}

.country-tile .flag {
  font-size: 20px;
}

.country-tile .cn-count {
  font-size: 13px;
  font-weight: 800;
  margin-top: 4px;
}

.country-tile .cn-pct {
  font-size: 10px;
  color: var(--brand-green);
  font-weight: 700;
}

/* ---- rank ladder ---- */
.rank-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}

.rank-shield {
  width: 74px;
  height: 82px;
  flex-shrink: 0;
}

.rank-hero-mid {
  flex: 1;
}

.rank-hero-mid .rk-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.rank-hero-mid .rk-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-green);
}

.rank-hero-mid .rk-next {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rank-hero-right {
  text-align: right;
}

.rank-hero-right .rk-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.rank-hero-right .rk-reward {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-green);
}

.rank-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 20px 18px;
}

.rank-stats-row .rs {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px;
}

.rank-stats-row .rs-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rank-stats-row .rs-value {
  font-size: 15px;
  font-weight: 800;
  margin-top: 4px;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  margin: 0 5px 10px;
}

.rank-row.current {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.rank-row:not(.current) {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.rank-row img,
.rank-row .rr-icon {
  width: 80px;
  height: 80px;
}

.rank-row .rr-mid {
  flex: 1;
}

.rank-row .rr-name {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rank-row .rr-detail {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}

.rank-row .rr-detail div {
  font-size: 11px;
  color: var(--text-secondary);
}

.rank-row .rr-detail b {
  display: block;
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 700;
}

.rank-row .rr-lock {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
}

/* ---- notification list ---- */
.notif-tabs {
  display: flex;
  gap: 8px;
  padding: 0 20px 4px;
  overflow-x: auto;
}

.notif-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}

.notif-tab .count {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 10.5px;
}

.notif-tab.active {
  background: var(--brand-green);
  color: var(--text-on-brand);
  border-color: var(--brand-green);
}

.notif-tab.active .count {
  background: rgba(0, 0, 0, 0.18);
}

.mark-read {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 20px;
  font-size: 12px;
  color: var(--brand-green);
  font-weight: 700;
}

.mark-read svg {
  width: 15px;
  height: 15px;
}

.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  margin: 0 20px 10px;
  position: relative;
}

.notif-item.unread {
  border-color: rgba(34, 197, 94, 0.3);
}

.notif-item .ni-title {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-item .ni-title .amt {
  color: var(--brand-green);
  font-weight: 800;
}

.notif-item .ni-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}

.notif-item .ni-time {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  margin-left: 8px;
}

.notif-item .ni-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.notif-item .unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-green);
  margin-right: 4px;
  flex-shrink: 0;
  align-self: center;
}

/* ---- profile ---- */

.profile-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: space-between;
}

.profile-top img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-green);
}

.profile-top .p-name {
  font-size: 17px;
  font-weight: 800;
}

.profile-top .p-id {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.profile-top .p-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-top .p-meta div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-top .p-meta svg {
  width: 14px;
  height: 14px;
}

.qr-chip {
  text-align: center;
}

.qr-chip .qr-box {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.qr-chip .qr-box svg {
  width: 100%;
  height: 100%;
}

.qr-chip .qr-link {
  font-size: 10.5px;
  color: var(--brand-green);
  font-weight: 700;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: center;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.profile-stats .ps {
  text-align: center;
}

.profile-stats .ps-icon {
  width: 30px;
  height: 30px;
  margin: 0 auto 6px;
}

.profile-stats .ps-value {
  font-size: 14px;
  font-weight: 800;
}

.profile-stats .ps-label {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.profile-stats .ps-link {
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 4px;
}

.upgrade-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.upgrade-banner .ub-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.upgrade-banner .ub-icon svg {
  width: 22px;
  height: 22px;
  color: var(--brand-green);
}

.upgrade-banner .ub-mid {
  flex: 1;
}

.upgrade-banner .ub-title {
  font-size: 13.5px;
  font-weight: 800;
}

.upgrade-banner .ub-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.account-list .row-item {
  cursor: pointer;
}

.account-list .row-item:hover {
  background: var(--hover-bg);
  border-radius: 12px;
}

.app-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.app-info-grid .ai-tile {
  text-align: center;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.app-info-grid .ai-tile svg {
  width: 20px;
  height: 20px;
  margin: 0 auto 6px;
  color: var(--brand-green);
}

/* ---- support ---- */
.support-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.16), transparent 70%);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.support-hero .sh-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-hero .sh-icon svg {
  width: 28px;
  height: 28px;
  color: var(--brand-green);
}

.support-hero .sh-title {
  font-size: 16px;
  font-weight: 800;
}

.support-hero .sh-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.support-hours {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.support-hours .sh-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-hours .sh-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(34, 197, 94, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-green);
}

.support-hours .sh-ic svg {
  width: 19px;
  height: 19px;
}

.support-hours .sh-t {
  font-size: 13px;
  font-weight: 800;
}

.support-hours .sh-d {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.mail-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.mail-card .mc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.mail-card .mc-icon svg {
  width: 20px;
  height: 20px;
}

.mail-card .mc-title {
  font-size: 13.5px;
  font-weight: 800;
}

.mail-card .mc-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ---- referral ---- */

.referral-hero .rh-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.referral-hero .rh-code {
  font-size: 24px;
  font-weight: 800;
  color: var(--brand-green);
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.referral-hero .rh-copy {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-green);
}

.referral-hero .rh-copy svg {
  width: 15px;
  height: 15px;
}

.referral-hero .rh-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 12px;
}

.link-row svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.link-row .url {
  flex: 1;
  font-size: 11.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-row .btn {
  padding: 7px 12px;
  font-size: 11.5px;
  flex-shrink: 0;
}

.stat4-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.stat4-grid .s4 {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
}

.stat4-grid .s4 .icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.stat4-grid .s4 .icon-badge svg {
  width: 16px;
  height: 16px;
}

.stat4-grid .s4-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

.stat4-grid .s4-value {
  font-size: 17px;
  font-weight: 800;
  margin-top: 2px;
}

.stat4-grid .s4-link {
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
}

.how-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 4px;
}

.how-step {
  text-align: center;
  flex: 1;
}

.how-step .hs-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.how-step .hs-circle svg {
  width: 22px;
  height: 22px;
}

.how-step .hs-num {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--text-on-brand);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-step .hs-title {
  font-size: 12.5px;
  font-weight: 800;
}

.how-step .hs-desc {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}

.how-arrow {
  color: var(--text-tertiary);
  margin-top: 20px;
  width: 16px;
}

.share-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 4px 0;
}

.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.share-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.share-icon svg {
  width: 20px;
  height: 20px;
}

.promo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.promo-row .pr-icon {
  font-size: 26px;
}

.promo-row .pr-title {
  font-size: 13px;
  font-weight: 800;
}

.promo-row .pr-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.qr-scan-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.qr-scan-card .qr-box {
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 10px;
  padding: 5px;
}

.qr-scan-card .qr-box svg {
  width: 100%;
  height: 100%;
}

/* ---- wallet ---- */

.wallet-hero .wh-label {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.wallet-hero .wh-amount {
  font-size: 28px;
  font-weight: 800;
  margin-top: 6px;
}

.wallet-hero .wh-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.wallet-hero .wh-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.mywallet-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}

.switch {
  width: 38px;
  height: 22px;
  border-radius: 99px;
  background: var(--brand-green);
  position: relative;
  flex-shrink: 0;
}

.switch::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  right: 3px;
}

.wallet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.wallet-row .wr-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 4px 12px -5px rgba(0, 0, 0, .5);
  background-image: linear-gradient(155deg, rgba(255, 255, 255, .18), transparent 60%);
}

.wallet-row .wr-mid {
  flex: 1;
}

.wallet-row .wr-name {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wallet-row .wr-amount {
  font-size: 15px;
  font-weight: 800;
  margin-top: 3px;
}

.wallet-row .wr-usd {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.wallet-row .wr-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wallet-row .wr-actions .btn {
  padding: 6px 12px;
  font-size: 11px;
}


/* ---- investment ---- */
.pkg-card {
  padding: 20px;
}

.pkg-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pkg-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgb(34 125 197 / 35%), rgb(34 92 197 / 8%));
    display: flex;
    align-items: center;
    justify-content: center;
border: 2px solid #1dd7ff;
}

.pkg-icon svg {
  width: 30px;
  height: 30px;
  color: var(--brand-green);
}

.pkg-mid .pk-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-green);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.pkg-mid .pk-name {
  font-size: 19px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pkg-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.pkg-meta .pm-label {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.pkg-meta .pm-value {
  font-size: 13.5px;
  font-weight: 800;
  margin-top: 4px;
}

.return-panel {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.line-spark {
  flex: 1;
  height: 60px;
}

.daily-return-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.daily-return-grid .dr {
  text-align: center;
  padding: 14px 8px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

.daily-return-grid .dr-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.daily-return-grid .dr-value {
  font-size: 16px;
  font-weight: 800;
}

.daily-return-grid .dr-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.ai-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.ai-note .an-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-green);
  flex-shrink: 0;
}

.ai-note .an-icon svg {
  width: 19px;
  height: 19px;
}

.ai-note .an-title {
  font-size: 12.5px;
  font-weight: 800;
}

.ai-note .an-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ---- team page ---- */
.team-stats2 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.team-stats2 .ts-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-stats2 .ts-value {
  font-size: 19px;
  font-weight: 800;
}

.team-stats2 .ts-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.team-stats2 .ts-delta {
  font-size: 10.5px;
  color: var(--brand-green);
  font-weight: 700;
}

.team-stats2 .divider {
  width: 1px;
  height: 36px;
  background: var(--hairline);
}

.team-grid4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.team-grid4 .tg {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
}

.team-grid4 .tg-value {
  font-size: 18px;
  font-weight: 800;
  margin-top: 8px;
}

.team-grid4 .tg-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.team-grid4 .tg-delta {
  font-size: 10.5px;
  color: var(--brand-green);
  font-weight: 700;
  margin-top: 4px;
}

.line-chart {
  width: 100%;
  height: 150px;
}

@media (max-width:400px) {
  .country-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .app-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rank-hero {
    display: flex;
  }

  .upgrade-banner,
  .profile-top {
    display: flex;
  }

}

/* ---- deposit / withdraw ---- */
.field {
  margin-bottom: 16px;
}

.field:last-child {
  margin-bottom: 0;
}

.field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.field label .max-link {
  color: var(--brand-green);
  font-weight: 800;
  cursor: pointer;
}

.input-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--card-border-strong);
  border-radius: 12px;
  padding: 0 14px;
  height: 48px;
}

.input-box:focus-within {
  border-color: var(--brand-green);
}

.input-box input,
.input-box select {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  height: 100%;
}

.input-box input::placeholder {
  color: var(--text-tertiary);
  font-weight: 600;
}

.input-box .prefix {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.input-box .unit-pill {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.input-box .copy-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}

.input-box .copy-btn svg {
  width: 14px;
  height: 14px;
}

.net-tabs {
  display: flex;
  gap: 8px;
}

.net-tab {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1px solid var(--card-border-strong);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.net-tab.active {
  background: rgba(34, 197, 94, 0.14);
  border-color: var(--brand-green);
  color: var(--brand-green);
}

.qr-deposit-card {
  text-align: center;
  padding: 20px;
}

.qr-deposit-card .qr-box {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
}

.qr-deposit-card .qr-box svg {
  width: 100%;
  height: 100%;
}

.qr-deposit-card .qr-hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 12px;
}

.summary-box {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 16px;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12.5px;
}

.summary-row .sr-label {
  color: var(--text-secondary);
}

.summary-row .sr-value {
  font-weight: 800;
}

.summary-row.total {
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
  padding-top: 10px;
  font-size: 14px;
}

.summary-row.total .sr-value {
  color: var(--brand-green);
  font-size: 16px;
}

.note-box {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.note-box.info {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.note-box .nb-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-orange);
  flex-shrink: 0;
  margin-top: 1px;
}

.note-box.info .nb-icon {
  color: var(--accent-blue);
}

.note-box .nb-text {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.note-box .nb-text b {
  color: var(--text-primary);
}

.steps-vertical {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step-v {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.step-v .sv-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  color: var(--brand-green);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-v .sv-title {
  font-size: 13px;
  font-weight: 800;
}

.step-v .sv-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.5;
}

.wallet-tabs {
  display: flex;
  gap: 8px;
  padding: 2px;
  background: var(--card-bg-soft);
  border-radius: 14px;
}

.wallet-tabs .wt {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wallet-tabs .wt svg {
  width: 15px;
  height: 15px;
}

.wallet-tabs .wt.active {
  background: var(--brand-green);
  color: var(--text-on-brand);
}

.pkg-select-grid {
  display: flex;
  overflow: auto;
  gap: 10px;
}

.pkg-option {
  border: 1px solid var(--card-border-strong);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all .15s ease;
  background: var(--card-bg-soft);
}

.pkg-option:hover {
  border-color: var(--brand-green);
}

.pkg-option.selected {
  border-color: var(--brand-green);
  background: rgba(34, 197, 94, 0.1);
}

.pkg-option .po-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pkg-option .po-name {
  font-size: 13.5px;
  font-weight: 800;
}

.pkg-option .po-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--card-border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pkg-option.selected .po-check {
  border-color: var(--brand-green);
  background: var(--brand-green);
}

.pkg-option .po-check svg {
  width: 11px;
  height: 11px;
  color: var(--text-on-brand);
  display: none;
}

.pkg-option.selected .po-check svg {
  display: block;
}

.pkg-option .po-meta {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}

.pkg-option .po-meta div {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.pkg-option .po-meta b {
  display: block;
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 800;
  margin-top: 1px;
}

.agree-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.agree-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--brand-green);
  flex-shrink: 0;
}

.agree-row label {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.agree-row a {
  color: var(--brand-green);
  font-weight: 700;
}

@media (max-width:400px) {
  .pkg-select-grid {
    grid-template-columns: 1fr;
  }
}

.divider {
  width: 1px;
  height: 110px;
  background: var(--hairline);
}

.investment-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}


.investment-grid form {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 20px);
}

.px-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.pkg-select-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

.pkg-option {
  flex: 0 0 150px;
  min-width: 150px;
}

.investment-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

.investment-grid form {
  flex: 1;
  min-width: 0;
  width: 600px;
  /* Important */
}


/* ---------- airdrop card grid — every card is identical, always locked ---------- */
.pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding: 4px 20px 20px;
}

.pcard {
  position: relative;
  aspect-ratio: 3 / 4.4;
  border-radius: 16px;
  overflow: hidden;
  padding: 2px;
  isolation: isolate;
  background: linear-gradient(160deg, #3daf9300, #0f6b4f);
  /* box-shadow: 0 8px 22px -8px rgba(61, 175, 147, .55); */
  /* transition: transform .2s ease, box-shadow .2s ease; */
  /* animation: pcard-glow 3s ease-in-out infinite; */
}

.pcard:hover {
  transform: translateY(-4px) scale(1.02);
}

.pcard-inner::before {
  /* holo shine sweep */
  content: '';
  position: absolute;
  inset: -60% -20%;
  z-index: 1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}

.pcard:hover .pcard-inner::before {
  transform: translateX(120%);
}

.pcard-rarity {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  color: #fff;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-green-bright));
}

.pcard-edition {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  color: var(--text-tertiary);
}

.pcard-glyph {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcard-glyph svg {
  width: 32px;
  height: 32px;
  color: var(--brand-green-bright);
  filter: drop-shadow(0 0 8px rgba(46, 232, 120, .55));
  animation: pcard-lock-pulse 2.4s ease-in-out infinite;
}

.pcard-name {
  font-size: 12.5px;
  font-weight: 800;
  position: relative;
  z-index: 1;
  letter-spacing: .5px;
}

@keyframes pcard-glow {

  0%,
  100% {
    box-shadow: 0 8px 22px -8px rgba(61, 175, 147, .55);
  }

  50% {
    box-shadow: 0 10px 28px -6px rgba(46, 232, 120, .7);
  }
}

@keyframes pcard-lock-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .9;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* ---------- vault sealed — full-page state when the user owns zero cards ---------- */
.vault-sealed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  min-height: 60vh;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 30%, rgba(61, 175, 147, .1) 0%, transparent 65%);
}

.vault-sealed-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vault-sealed-ring::before,
.vault-sealed-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(61, 175, 147, .35);
  animation: vault-ripple 2.6s ease-out infinite;
}

.vault-sealed-ring::after {
  animation-delay: 1.3s;
}

@keyframes vault-ripple {
  0% {
    transform: scale(.7);
    opacity: .8;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.vault-sealed-badge {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--card-border-strong), var(--card-bg-soft));
  border: 1px solid var(--card-border);
  animation: vault-float 3s ease-in-out infinite;
}

.vault-sealed-badge svg {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
}

@keyframes vault-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.vault-sealed h2 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 8px;
}

.vault-sealed p {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width:520px) {
  .pcard-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 4px 16px 20px;
  }

  .pcard-glyph svg {
    width: 26px;
    height: 26px;
  }

  .pcard-name {
    font-size: 11px;
  }

  .vault-sealed {
    padding: 56px 20px;
    min-height: 50vh;
  }
}

option {
  background: var(--card-bg-soft);
  color: var(--text-secondary);
}

/* ---------- Personal Information page: layout-only restyle (stat strip + full-width form) ---------- */
.pi-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.pi-stat {
  border: 1px solid var(--hairline);
  background: var(--input-bg);
  border-radius: 14px;
  padding: 14px 16px;
}

.pi-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.pi-stat-value {
  font-size: 17px;
  font-weight: 800;
  margin-top: 6px;
}

@media (max-width: 860px) {
  .pi-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   REUSABLE COMPONENTS
   ============================================================ */

.section-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 2px;
}

.section-sub {
  font-size: 10px;
  color: var(--text-secondary);
}

/* ---- generic row list (transactions / income history) ---- */
.row-list {
  display: flex;
  flex-direction: column;
}

.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}

.row-item:last-child {
  border-bottom: none;
}

.row-item .ri-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-item .ri-icon svg {
  width: 18px;
  height: 18px;
}

.row-item .ri-mid {
  flex: 1;
  min-width: 0;
}

.row-item .ri-title {
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.row-item .ri-time {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.row-item .ri-right {
  text-align: right;
  flex-shrink: 0;
}

.row-item .ri-amount {
  font-size: 13.5px;
  font-weight: 800;
}

.row-item .ri-status {
  font-size: 11px;
  color: var(--brand-green);
  font-weight: 600;
  margin-top: 2px;
}

.row-item .ri-status.pending {
  color: var(--accent-orange);
}

.row-item .chev {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

.px-card {
  padding: 18px 20px;
}

/* ---- income tile grid ---- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 20px 18px;
}

.tile {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px;
  transition: border-color .2s ease, transform .2s ease;
}

.tile:hover {
  border-color: var(--card-border-strong);
  transform: translateY(-2px);
}

.tile .icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  margin-bottom: 8px;
}

.tile .icon-badge svg {
  width: 15px;
  height: 15px;
}

.tile .t-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

.tile .t-value {
  font-size: 15px;
  font-weight: 800;
  margin-top: 2px;
}

.tile .t-delta {
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ---- bar chart ---- */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 150px;
  padding: 16px 20px 0;
}

.bar-chart .bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.bar-chart .bar {
  width: 100%;
  max-width: 26px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--brand-green-bright), var(--brand-green-dim));
}

.bar-chart .bar-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.bar-chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 0 6px 0 20px;
  height: 150px;
}

/* ---- donut ---- */
.donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut {
  --pct: 135;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: conic-gradient(var(--brand-green-bright) calc(var(--pct)*1%), var(--input-bg) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  filter: drop-shadow(0 0 14px rgba(46, 232, 120, .28));
}

.donut::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--bg);
}

.donut .donut-label {
  position: relative;
  text-align: center;
}

.donut .donut-label b {
  display: block;
  font-size: 22px;
  font-weight: 800;
}

.donut .donut-label span {
  font-size: 8.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* ---- team tree ---- */
.team-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 4px;
}

.tt-root {
  text-align: center;
}

.tt-root img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--brand-green);
  object-fit: cover;
}

.tt-root .tag {
  margin-top: 6px;
}

.tt-branches {
  display: flex;
  width: 100%;
  gap: 14px;
  justify-content: space-between;
}

.tt-branch {
  flex: 1;
  text-align: center;
}

.tt-branch-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.tt-avatars {
  display: flex;
  justify-content: center;
}

.tt-avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  object-fit: cover;
  margin-left: -10px;
}

.tt-avatars img:first-child {
  margin-left: 0;
}

.tt-more {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-left: -10px;
  border: 2px solid var(--card-bg);
  color: var(--text-secondary);
}

/* ---- country rows ---- */
.country-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 20px 20px;
}

.country-tile {
  text-align: center;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px 4px;
}

.country-tile .flag {
  font-size: 20px;
}

.country-tile .cn-count {
  font-size: 13px;
  font-weight: 800;
  margin-top: 4px;
}

.country-tile .cn-pct {
  font-size: 10px;
  color: var(--brand-green);
  font-weight: 700;
}

/* ---- rank ladder ---- */
.rank-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}

.rank-shield {
  width: 74px;
  height: 82px;
  flex-shrink: 0;
}

.rank-hero-mid {
  flex: 1;
}

.rank-hero-mid .rk-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.rank-hero-mid .rk-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-green);
}

.rank-hero-mid .rk-next {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rank-hero-right {
  text-align: right;
}

.rank-hero-right .rk-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.rank-hero-right .rk-reward {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-green);
}

.rank-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 20px 18px;
}

.rank-stats-row .rs {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px;
}

.rank-stats-row .rs-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rank-stats-row .rs-value {
  font-size: 15px;
  font-weight: 800;
  margin-top: 4px;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  margin: 0 5px 10px;
}

.rank-row.current {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.rank-row:not(.current) {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.rank-row img,
.rank-row .rr-icon {
  width: 80px;
  height: 80px;
}

.rank-row .rr-mid {
  flex: 1;
}

.rank-row .rr-name {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rank-row .rr-detail {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}

.rank-row .rr-detail div {
  font-size: 11px;
  color: var(--text-secondary);
}

.rank-row .rr-detail b {
  display: block;
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 700;
}

.rank-row .rr-lock {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
}

/* ---- notification list ---- */
.notif-tabs {
  display: flex;
  gap: 8px;
  padding: 0 20px 4px;
  overflow-x: auto;
}

.notif-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}

.notif-tab .count {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 10.5px;
}

.notif-tab.active {
  background: var(--brand-green);
  color: var(--text-on-brand);
  border-color: var(--brand-green);
}

.notif-tab.active .count {
  background: rgba(0, 0, 0, 0.18);
}

.mark-read {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 20px;
  font-size: 12px;
  color: var(--brand-green);
  font-weight: 700;
}

.mark-read svg {
  width: 15px;
  height: 15px;
}

.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  margin: 0 20px 10px;
  position: relative;
}

.notif-item.unread {
  border-color: rgba(34, 197, 94, 0.3);
}

.notif-item .ni-title {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-item .ni-title .amt {
  color: var(--brand-green);
  font-weight: 800;
}

.notif-item .ni-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}

.notif-item .ni-time {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  margin-left: 8px;
}

.notif-item .ni-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.notif-item .unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-green);
  margin-right: 4px;
  flex-shrink: 0;
  align-self: center;
}

/* ---- profile ---- */


.profile-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.profile-top img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-green);
}

.profile-top .p-name {
  font-size: 17px;
  font-weight: 800;
}

.profile-top .p-id {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.profile-top .p-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-top .p-meta div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-top .p-meta svg {
  width: 14px;
  height: 14px;
}

.qr-chip {
  text-align: center;
}

.qr-chip .qr-box {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.qr-chip .qr-box svg {
  width: 100%;
  height: 100%;
}

.qr-chip .qr-link {
  font-size: 10.5px;
  color: var(--brand-green);
  font-weight: 700;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: center;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.profile-stats .ps {
  text-align: center;
}

.profile-stats .ps-icon {
  width: 30px;
  height: 30px;
  margin: 0 auto 6px;
}

.profile-stats .ps-value {
  font-size: 14px;
  font-weight: 800;
}

.profile-stats .ps-label {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.profile-stats .ps-link {
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 4px;
}

.upgrade-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.upgrade-banner .ub-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.upgrade-banner .ub-icon svg {
  width: 22px;
  height: 22px;
  color: var(--brand-green);
}

.upgrade-banner .ub-mid {
  flex: 1;
}

.upgrade-banner .ub-title {
  font-size: 13.5px;
  font-weight: 800;
}

.upgrade-banner .ub-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.account-list .row-item {
  cursor: pointer;
}

.account-list .row-item:hover {
  background: var(--hover-bg);
  border-radius: 12px;
}

.app-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.app-info-grid .ai-tile {
  text-align: center;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.app-info-grid .ai-tile svg {
  width: 20px;
  height: 20px;
  margin: 0 auto 6px;
  color: var(--brand-green);
}

/* ---- support ---- */
.support-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.16), transparent 70%);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.support-hero .sh-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(61, 175, 147, .32), rgba(34, 197, 94, 0.12) 70%);
  box-shadow: 0 6px 18px -8px rgba(61, 175, 147, .5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-hero .sh-icon svg {
  width: 28px;
  height: 28px;
  color: var(--brand-green);
}

.support-hero .sh-title {
  font-size: 16px;
  font-weight: 800;
}

.support-hero .sh-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ---------- redesigned support hero (with ticket-count stats) ---------- */

.support-hero-v2 .sh-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(155deg, var(--accent-green), #237a63);
  box-shadow: 0 6px 16px -6px rgba(61, 175, 147, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.support-hero-v2 .sh-icon svg {
  width: 26px;
  height: 26px;
  color: #fff;
}

.support-hero-v2 .sh-title {
  font-size: 16.5px;
  font-weight: 800;
}

.support-hero-v2 .sh-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.support-hero-v2 .sh-stats {
  display: flex;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.support-hero-v2 .sh-stat {
  text-align: center;
}

.support-hero-v2 .sh-stat b {
  display: block;
  font-size: 21px;
  font-weight: 800;
}

.support-hero-v2 .sh-stat span {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ---------- color-coded ticket cards ---------- */
.ticket-card {
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 14px 12px 18px;
  margin-bottom: 10px;
  background: var(--card-bg-soft);
  transition: transform .2s ease, border-color .2s ease;
}

.ticket-card:hover {
  transform: translateY(-2px);
  border-color: var(--card-border-strong);
}

.ticket-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 4px;
}

.ticket-card.status-open::before {
  background: var(--accent-blue);
}

.ticket-card.status-progress::before {
  background: var(--accent-orange);
}

.ticket-card.status-resolved::before {
  background: var(--brand-green);
}

.support-hours {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.support-hours .sh-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-hours .sh-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(34, 197, 94, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-green);
}

.support-hours .sh-ic svg {
  width: 19px;
  height: 19px;
}

.support-hours .sh-t {
  font-size: 13px;
  font-weight: 800;
}

.support-hours .sh-d {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.mail-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.mail-card .mc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(155deg, var(--accent-green), #237a63);
  box-shadow: 0 5px 14px -6px rgba(61, 175, 147, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.mail-card .mc-icon svg {
  width: 20px;
  height: 20px;
}

.mail-card .mc-title {
  font-size: 13.5px;
  font-weight: 800;
}

.mail-card .mc-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ---- referral ---- */


.referral-hero .rh-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.referral-hero .rh-code {
  font-size: 24px;
  font-weight: 800;
  color: var(--brand-green);
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.referral-hero .rh-copy {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-green);
}

.referral-hero .rh-copy svg {
  width: 15px;
  height: 15px;
}

.referral-hero .rh-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 12px;
}

.link-row svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.link-row .url {
  flex: 1;
  font-size: 11.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-row .btn {
  padding: 7px 12px;
  font-size: 11.5px;
  flex-shrink: 0;
}

.stat4-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.stat4-grid .s4 {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
}

.stat4-grid .s4 .icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.stat4-grid .s4 .icon-badge svg {
  width: 16px;
  height: 16px;
}

.stat4-grid .s4-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

.stat4-grid .s4-value {
  font-size: 17px;
  font-weight: 800;
  margin-top: 2px;
}

.stat4-grid .s4-link {
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
}

.how-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 4px;
}

.how-step {
  text-align: center;
  flex: 1;
}

.how-step .hs-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.how-step .hs-circle svg {
  width: 22px;
  height: 22px;
}

.how-step .hs-num {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--text-on-brand);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-step .hs-title {
  font-size: 12.5px;
  font-weight: 800;
}

.how-step .hs-desc {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}

.how-arrow {
  color: var(--text-tertiary);
  margin-top: 20px;
  width: 16px;
}

.share-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 4px 0;
}

.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.share-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.share-icon svg {
  width: 20px;
  height: 20px;
}

.promo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.promo-row .pr-icon {
  font-size: 26px;
}

.promo-row .pr-title {
  font-size: 13px;
  font-weight: 800;
}

.promo-row .pr-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.qr-scan-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.qr-scan-card .qr-box {
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 10px;
  padding: 5px;
}

.qr-scan-card .qr-box svg {
  width: 100%;
  height: 100%;
}

/* ---- wallet ---- */


.wallet-hero .wh-label {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.wallet-hero .wh-amount {
  font-size: 28px;
  font-weight: 800;
  margin-top: 6px;
}

.wallet-hero .wh-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.wallet-hero .wh-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.mywallet-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}

.switch {
  width: 38px;
  height: 22px;
  border-radius: 99px;
  background: var(--brand-green);
  position: relative;
  flex-shrink: 0;
}

.switch::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  right: 3px;
}

.wallet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.wallet-row .wr-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 4px 12px -5px rgba(0, 0, 0, .5);
  background-image: linear-gradient(155deg, rgba(255, 255, 255, .18), transparent 60%);
}

.wallet-row .wr-mid {
  flex: 1;
}

.wallet-row .wr-name {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wallet-row .wr-amount {
  font-size: 15px;
  font-weight: 800;
  margin-top: 3px;
}

.wallet-row .wr-usd {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.wallet-row .wr-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wallet-row .wr-actions .btn {
  padding: 6px 12px;
  font-size: 11px;
}




/* ---- team page ---- */
.team-stats2 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.team-stats2 .ts-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-stats2 .ts-value {
  font-size: 19px;
  font-weight: 800;
}

.team-stats2 .ts-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.team-stats2 .ts-delta {
  font-size: 10.5px;
  color: var(--brand-green);
  font-weight: 700;
}

.team-stats2 .divider {
  width: 1px;
  height: 36px;
  background: var(--hairline);
}

.team-grid4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.team-grid4 .tg {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
}

.team-grid4 .tg-value {
  font-size: 18px;
  font-weight: 800;
  margin-top: 8px;
}

.team-grid4 .tg-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.team-grid4 .tg-delta {
  font-size: 10.5px;
  color: var(--brand-green);
  font-weight: 700;
  margin-top: 4px;
}

.line-chart {
  width: 100%;
  height: 150px;
}

@media (max-width:400px) {
  .country-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .app-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rank-hero {
    display: grid;
  }

  .upgrade-banner,
  .profile-top {
    display: grid;
  }

}

/* ---- deposit / withdraw ---- */
.field {
  margin-bottom: 16px;
}

.field:last-child {
  margin-bottom: 0;
}

.field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.field label .max-link {
  color: var(--brand-green);
  font-weight: 800;
  cursor: pointer;
}

.input-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--card-border-strong);
  border-radius: 12px;
  padding: 0 14px;
  height: 48px;
}

.input-box:focus-within {
  border-color: var(--brand-green);
}

.input-box input,
.input-box select {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  height: 100%;
}

.input-box input::placeholder {
  color: var(--text-tertiary);
  font-weight: 600;
}

.input-box .prefix {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.input-box .unit-pill {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.input-box .copy-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}

.input-box .copy-btn svg {
  width: 14px;
  height: 14px;
}

.net-tabs {
  display: flex;
  gap: 8px;
}

.net-tab {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1px solid var(--card-border-strong);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.net-tab.active {
  background: rgba(34, 197, 94, 0.14);
  border-color: var(--brand-green);
  color: var(--brand-green);
}

.qr-deposit-card {
  text-align: center;
  padding: 20px;
}

.qr-deposit-card .qr-box {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
}

.qr-deposit-card .qr-box svg {
  width: 100%;
  height: 100%;
}

.qr-deposit-card .qr-hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 12px;
}

.summary-box {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 16px;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12.5px;
}

.summary-row .sr-label {
  color: var(--text-secondary);
}

.summary-row .sr-value {
  font-weight: 800;
}

.summary-row.total {
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
  padding-top: 10px;
  font-size: 14px;
}

.summary-row.total .sr-value {
  color: var(--brand-green);
  font-size: 16px;
}

.note-box {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.note-box.info {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.note-box .nb-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-orange);
  flex-shrink: 0;
  margin-top: 1px;
}

.note-box.info .nb-icon {
  color: var(--accent-blue);
}

.note-box .nb-text {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.note-box .nb-text b {
  color: var(--text-primary);
}

.steps-vertical {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step-v {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.step-v .sv-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  color: var(--brand-green);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-v .sv-title {
  font-size: 13px;
  font-weight: 800;
}

.step-v .sv-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.5;
}

.wallet-tabs {
  display: flex;
  gap: 8px;
  padding: 2px;
  background: var(--card-bg-soft);
  border-radius: 14px;
}

.wallet-tabs .wt {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wallet-tabs .wt svg {
  width: 15px;
  height: 15px;
}

.wallet-tabs .wt.active {
  background: var(--brand-green);
  color: var(--text-on-brand);
}

.pkg-select-grid {
  display: flex;
  overflow: auto;
  gap: 10px;
}

.pkg-option {
  border: 1px solid var(--card-border-strong);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all .15s ease;
  background: var(--card-bg-soft);
}

.pkg-option:hover {
  border-color: var(--brand-green);
}

.pkg-option.selected {
  border-color: var(--brand-green);
  background: rgba(34, 197, 94, 0.1);
}

.pkg-option .po-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pkg-option .po-name {
  font-size: 13.5px;
  font-weight: 800;
}

.pkg-option .po-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--card-border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pkg-option.selected .po-check {
  border-color: var(--brand-green);
  background: var(--brand-green);
}

.pkg-option .po-check svg {
  width: 11px;
  height: 11px;
  color: var(--text-on-brand);
  display: none;
}

.pkg-option.selected .po-check svg {
  display: block;
}

.pkg-option .po-meta {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}

.pkg-option .po-meta div {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.pkg-option .po-meta b {
  display: block;
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 800;
  margin-top: 1px;
}

.agree-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.agree-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--brand-green);
  flex-shrink: 0;
}

.agree-row label {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.agree-row a {
  color: var(--brand-green);
  font-weight: 700;
}

@media (max-width:400px) {
  .pkg-select-grid {
    grid-template-columns: 1fr;
  }
}

.divider {
  width: 1px;
  height: 110px;
  background: var(--hairline);
}

.investment-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}


.investment-grid form {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 20px);
}

.px-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.pkg-select-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

.pkg-option {
  flex: 0 0 150px;
  min-width: 150px;
}

.investment-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

.investment-grid form {
  flex: 1;
  min-width: 0;
  width: 600px;
  /* Important */
}


/* ---------- airdrop card grid — every card is identical, always locked ---------- */
.pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding: 4px 20px 20px;
}

.pcard {
  position: relative;
  aspect-ratio: 3 / 4.4;
  border-radius: 16px;
  overflow: hidden;
  padding: 2px;
  isolation: isolate;
  background: linear-gradient(160deg, #3daf9300, #0f6b4f);
  /* box-shadow: 0 8px 22px -8px rgba(61, 175, 147, .55); */
  /* transition: transform .2s ease, box-shadow .2s ease; */
  /* animation: pcard-glow 3s ease-in-out infinite; */
}

.pcard:hover {
  transform: translateY(-4px) scale(1.02);
}

.pcard:hover .pcard-inner::before {
  transform: translateX(120%);
}

.pcard-rarity {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  color: #fff;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-green-bright));
}

.pcard-edition {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  color: var(--text-tertiary);
}

.pcard-glyph {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcard-glyph svg {
  width: 32px;
  height: 32px;
  color: var(--brand-green-bright);
  filter: drop-shadow(0 0 8px rgba(46, 232, 120, .55));
  animation: pcard-lock-pulse 2.4s ease-in-out infinite;
}

.pcard-name {
  font-size: 12.5px;
  font-weight: 800;
  position: relative;
  z-index: 1;
  letter-spacing: .5px;
}

@keyframes pcard-glow {

  0%,
  100% {
    box-shadow: 0 8px 22px -8px rgba(61, 175, 147, .55);
  }

  50% {
    box-shadow: 0 10px 28px -6px rgba(46, 232, 120, .7);
  }
}

@keyframes pcard-lock-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .9;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* ---------- vault sealed — full-page state when the user owns zero cards ---------- */
.vault-sealed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  min-height: 60vh;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 30%, rgba(61, 175, 147, .1) 0%, transparent 65%);
}

.vault-sealed-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vault-sealed-ring::before,
.vault-sealed-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(61, 175, 147, .35);
  animation: vault-ripple 2.6s ease-out infinite;
}

.vault-sealed-ring::after {
  animation-delay: 1.3s;
}

@keyframes vault-ripple {
  0% {
    transform: scale(.7);
    opacity: .8;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.vault-sealed-badge {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--card-border-strong), var(--card-bg-soft));
  border: 1px solid var(--card-border);
  animation: vault-float 3s ease-in-out infinite;
}

.vault-sealed-badge svg {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
}

@keyframes vault-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.vault-sealed h2 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 8px;
}

.vault-sealed p {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width:520px) {
  .pcard-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 4px 16px 20px;
  }

  .pcard-glyph svg {
    width: 26px;
    height: 26px;
  }

  .pcard-name {
    font-size: 11px;
  }

  .vault-sealed {
    padding: 56px 20px;
    min-height: 50vh;
  }
}

option {
  background: var(--card-bg-soft);
  color: var(--text-secondary);
}

/* ---------- Personal Information page: layout-only restyle (stat strip + full-width form) ---------- */
.pi-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.pi-stat {
  border: 1px solid var(--hairline);
  background: var(--input-bg);
  border-radius: 14px;
  padding: 14px 16px;
}

.pi-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.pi-stat-value {
  font-size: 17px;
  font-weight: 800;
  margin-top: 6px;
}

@media (max-width: 860px) {
  .pi-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   REUSABLE COMPONENTS
   ============================================================ */

.section-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 2px;
}

.section-sub {
  font-size: 10px;
  color: var(--text-secondary);
}

/* ---- generic row list (transactions / income history) ---- */
.row-list {
  display: flex;
  flex-direction: column;
}

.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}

.row-item:last-child {
  border-bottom: none;
}

.row-item .ri-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-item .ri-icon svg {
  width: 18px;
  height: 18px;
}

.row-item .ri-mid {
  flex: 1;
  min-width: 0;
}

.row-item .ri-title {
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.row-item .ri-time {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.row-item .ri-right {
  text-align: right;
  flex-shrink: 0;
}

.row-item .ri-amount {
  font-size: 13.5px;
  font-weight: 800;
}

.row-item .ri-status {
  font-size: 11px;
  color: var(--brand-green);
  font-weight: 600;
  margin-top: 2px;
}

.row-item .ri-status.pending {
  color: var(--accent-orange);
}

.row-item .chev {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

.px-card {
  padding: 18px 20px;
}

/* ---- income tile grid ---- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 20px 18px;
}

.tile {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px;
  transition: border-color .2s ease, transform .2s ease;
}

.tile:hover {
  border-color: var(--card-border-strong);
  transform: translateY(-2px);
}

.tile .icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  margin-bottom: 8px;
}

.tile .icon-badge svg {
  width: 15px;
  height: 15px;
}

.tile .t-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

.tile .t-value {
  font-size: 15px;
  font-weight: 800;
  margin-top: 2px;
}

.tile .t-delta {
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ---- bar chart ---- */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 150px;
  padding: 16px 20px 0;
}

.bar-chart .bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.bar-chart .bar {
  width: 100%;
  max-width: 26px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--brand-green-bright), var(--brand-green-dim));
  transition: height .5s ease, filter .15s ease;
  cursor: default;
}

.bar-chart .bar-col:hover .bar {
  filter: brightness(1.2);
}

.bar-chart .bar-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.bar-chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 0 6px 0 20px;
  height: 150px;
}

/* ---- donut ---- */
.donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut {
  --pct: 135;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: conic-gradient(var(--brand-green-bright) calc(var(--pct)*1%), var(--input-bg) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  filter: drop-shadow(0 0 14px rgba(46, 232, 120, .28));
}

.donut::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--bg);
}

.donut .donut-label {
  position: relative;
  text-align: center;
}

.donut .donut-label b {
  display: block;
  font-size: 22px;
  font-weight: 800;
}

.donut .donut-label span {
  font-size: 8.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* ---- team tree ---- */
.team-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 4px;
}

.tt-root {
  text-align: center;
}

.tt-root img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--brand-green);
  object-fit: cover;
}

.tt-root .tag {
  margin-top: 6px;
}

.tt-branches {
  display: flex;
  width: 100%;
  gap: 14px;
  justify-content: space-between;
}

.tt-branch {
  flex: 1;
  text-align: center;
}

.tt-branch-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.tt-avatars {
  display: flex;
  justify-content: center;
}

.tt-avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  object-fit: cover;
  margin-left: -10px;
}

.tt-avatars img:first-child {
  margin-left: 0;
}

.tt-more {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-left: -10px;
  border: 2px solid var(--card-bg);
  color: var(--text-secondary);
}

/* ---- country rows ---- */
.country-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 20px 20px;
}

.country-tile {
  text-align: center;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px 4px;
}

.country-tile .flag {
  font-size: 20px;
}

.country-tile .cn-count {
  font-size: 13px;
  font-weight: 800;
  margin-top: 4px;
}

.country-tile .cn-pct {
  font-size: 10px;
  color: var(--brand-green);
  font-weight: 700;
}

/* ---- rank ladder ---- */
.rank-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}

.rank-shield {
  width: 74px;
  height: 82px;
  flex-shrink: 0;
}

.rank-hero-mid {
  flex: 1;
}

.rank-hero-mid .rk-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.rank-hero-mid .rk-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-green);
}

.rank-hero-mid .rk-next {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rank-hero-right {
  text-align: right;
}

.rank-hero-right .rk-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.rank-hero-right .rk-reward {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-green);
}

.rank-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 20px 18px;
}

.rank-stats-row .rs {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px;
}

.rank-stats-row .rs-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rank-stats-row .rs-value {
  font-size: 15px;
  font-weight: 800;
  margin-top: 4px;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  margin: 0 5px 10px;
}

.rank-row.current {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.rank-row:not(.current) {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.rank-row img,
.rank-row .rr-icon {
  width: 80px;
  height: 80px;
}

.rank-row .rr-mid {
  flex: 1;
}

.rank-row .rr-name {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rank-row .rr-detail {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}

.rank-row .rr-detail div {
  font-size: 11px;
  color: var(--text-secondary);
}

.rank-row .rr-detail b {
  display: block;
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 700;
}

.rank-row .rr-lock {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
}

/* ---- notification list ---- */
.notif-tabs {
  display: flex;
  gap: 8px;
  padding: 0 20px 4px;
  overflow-x: auto;
}

.notif-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}

.notif-tab .count {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 10.5px;
}

.notif-tab.active {
  background: var(--brand-green);
  color: var(--text-on-brand);
  border-color: var(--brand-green);
}

.notif-tab.active .count {
  background: rgba(0, 0, 0, 0.18);
}

.mark-read {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 20px;
  font-size: 12px;
  color: var(--brand-green);
  font-weight: 700;
}

.mark-read svg {
  width: 15px;
  height: 15px;
}

.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  margin: 0 20px 10px;
  position: relative;
}

.notif-item.unread {
  border-color: rgba(34, 197, 94, 0.3);
}

.notif-item .ni-title {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-item .ni-title .amt {
  color: var(--brand-green);
  font-weight: 800;
}

.notif-item .ni-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}

.notif-item .ni-time {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  margin-left: 8px;
}

.notif-item .ni-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.notif-item .unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-green);
  margin-right: 4px;
  flex-shrink: 0;
  align-self: center;
}

/* ---- profile ---- */


.profile-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.profile-top img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-green);
}

.profile-top .p-name {
  font-size: 17px;
  font-weight: 800;
}

.profile-top .p-id {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.profile-top .p-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-top .p-meta div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-top .p-meta svg {
  width: 14px;
  height: 14px;
}

.qr-chip {
  text-align: center;
}

.qr-chip .qr-box {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.qr-chip .qr-box svg {
  width: 100%;
  height: 100%;
}

.qr-chip .qr-link {
  font-size: 10.5px;
  color: var(--brand-green);
  font-weight: 700;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: center;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.profile-stats .ps {
  text-align: center;
}

.profile-stats .ps-icon {
  width: 30px;
  height: 30px;
  margin: 0 auto 6px;
}

.profile-stats .ps-value {
  font-size: 14px;
  font-weight: 800;
}

.profile-stats .ps-label {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.profile-stats .ps-link {
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 4px;
}

.upgrade-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.upgrade-banner .ub-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.upgrade-banner .ub-icon svg {
  width: 22px;
  height: 22px;
  color: var(--brand-green);
}

.upgrade-banner .ub-mid {
  flex: 1;
}

.upgrade-banner .ub-title {
  font-size: 13.5px;
  font-weight: 800;
}

.upgrade-banner .ub-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.account-list .row-item {
  cursor: pointer;
}

.account-list .row-item:hover {
  background: var(--hover-bg);
  border-radius: 12px;
}

.app-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.app-info-grid .ai-tile {
  text-align: center;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.app-info-grid .ai-tile svg {
  width: 20px;
  height: 20px;
  margin: 0 auto 6px;
  color: var(--brand-green);
}

/* ---- support ---- */
.support-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.16), transparent 70%);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.support-hero .sh-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(61, 175, 147, .32), rgba(34, 197, 94, 0.12) 70%);
  box-shadow: 0 6px 18px -8px rgba(61, 175, 147, .5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-hero .sh-icon svg {
  width: 28px;
  height: 28px;
  color: var(--brand-green);
}

.support-hero .sh-title {
  font-size: 16px;
  font-weight: 800;
}

.support-hero .sh-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ---------- redesigned support hero (with ticket-count stats) ---------- */

.support-hero-v2 .sh-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(155deg, var(--accent-green), #237a63);
  box-shadow: 0 6px 16px -6px rgba(61, 175, 147, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.support-hero-v2 .sh-icon svg {
  width: 26px;
  height: 26px;
  color: #fff;
}

.support-hero-v2 .sh-title {
  font-size: 16.5px;
  font-weight: 800;
}

.support-hero-v2 .sh-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.support-hero-v2 .sh-stats {
  display: flex;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.support-hero-v2 .sh-stat {
  text-align: center;
}

.support-hero-v2 .sh-stat b {
  display: block;
  font-size: 21px;
  font-weight: 800;
}

.support-hero-v2 .sh-stat span {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ---------- color-coded ticket cards ---------- */
.ticket-card {
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 14px 12px 18px;
  margin-bottom: 10px;
  background: var(--card-bg-soft);
  transition: transform .2s ease, border-color .2s ease;
}

.ticket-card:hover {
  transform: translateY(-2px);
  border-color: var(--card-border-strong);
}

.ticket-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 4px;
}

.ticket-card.status-open::before {
  background: var(--accent-blue);
}

.ticket-card.status-progress::before {
  background: var(--accent-orange);
}

.ticket-card.status-resolved::before {
  background: var(--brand-green);
}

.support-hours {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.support-hours .sh-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-hours .sh-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(34, 197, 94, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-green);
}

.support-hours .sh-ic svg {
  width: 19px;
  height: 19px;
}

.support-hours .sh-t {
  font-size: 13px;
  font-weight: 800;
}

.support-hours .sh-d {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.mail-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.mail-card .mc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(155deg, var(--accent-green), #237a63);
  box-shadow: 0 5px 14px -6px rgba(61, 175, 147, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.mail-card .mc-icon svg {
  width: 20px;
  height: 20px;
}

.mail-card .mc-title {
  font-size: 13.5px;
  font-weight: 800;
}

.mail-card .mc-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ---- referral ---- */

.referral-hero .rh-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.referral-hero .rh-code {
  font-size: 24px;
  font-weight: 800;
  color: var(--brand-green);
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.referral-hero .rh-copy {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-green);
}

.referral-hero .rh-copy svg {
  width: 15px;
  height: 15px;
}

.referral-hero .rh-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 12px;
}

.link-row svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.link-row .url {
  flex: 1;
  font-size: 11.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-row .btn {
  padding: 7px 12px;
  font-size: 11.5px;
  flex-shrink: 0;
}

.stat4-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.stat4-grid .s4 {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
}

.stat4-grid .s4 .icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.stat4-grid .s4 .icon-badge svg {
  width: 16px;
  height: 16px;
}

.stat4-grid .s4-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

.stat4-grid .s4-value {
  font-size: 17px;
  font-weight: 800;
  margin-top: 2px;
}

.stat4-grid .s4-link {
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
}

.how-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 4px;
}

.how-step {
  text-align: center;
  flex: 1;
}

.how-step .hs-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.how-step .hs-circle svg {
  width: 22px;
  height: 22px;
}

.how-step .hs-num {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--text-on-brand);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-step .hs-title {
  font-size: 12.5px;
  font-weight: 800;
}

.how-step .hs-desc {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}

.how-arrow {
  color: var(--text-tertiary);
  margin-top: 20px;
  width: 16px;
}

.share-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 4px 0;
}

.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.share-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.share-icon svg {
  width: 20px;
  height: 20px;
}

.promo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.promo-row .pr-icon {
  font-size: 26px;
}

.promo-row .pr-title {
  font-size: 13px;
  font-weight: 800;
}

.promo-row .pr-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.qr-scan-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.qr-scan-card .qr-box {
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 10px;
  padding: 5px;
}

.qr-scan-card .qr-box svg {
  width: 100%;
  height: 100%;
}

/* ---- wallet ---- */

.wallet-hero .wh-label {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.wallet-hero .wh-amount {
  font-size: 28px;
  font-weight: 800;
  margin-top: 6px;
}

.wallet-hero .wh-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.wallet-hero .wh-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.mywallet-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}

.switch {
  width: 38px;
  height: 22px;
  border-radius: 99px;
  background: var(--brand-green);
  position: relative;
  flex-shrink: 0;
}

.switch::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  right: 3px;
}

.wallet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.wallet-row .wr-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 4px 12px -5px rgba(0, 0, 0, .5);
  background-image: linear-gradient(155deg, rgba(255, 255, 255, .18), transparent 60%);
}

.wallet-row .wr-mid {
  flex: 1;
}

.wallet-row .wr-name {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wallet-row .wr-amount {
  font-size: 15px;
  font-weight: 800;
  margin-top: 3px;
}

.wallet-row .wr-usd {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.wallet-row .wr-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wallet-row .wr-actions .btn {
  padding: 6px 12px;
  font-size: 11px;
}


/* ---- team page ---- */
.team-stats2 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.team-stats2 .ts-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-stats2 .ts-value {
  font-size: 19px;
  font-weight: 800;
}

.team-stats2 .ts-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.team-stats2 .ts-delta {
  font-size: 10.5px;
  color: var(--brand-green);
  font-weight: 700;
}

.team-stats2 .divider {
  width: 1px;
  height: 36px;
  background: var(--hairline);
}

.team-grid4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.team-grid4 .tg {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
}

.team-grid4 .tg-value {
  font-size: 18px;
  font-weight: 800;
  margin-top: 8px;
}

.team-grid4 .tg-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.team-grid4 .tg-delta {
  font-size: 10.5px;
  color: var(--brand-green);
  font-weight: 700;
  margin-top: 4px;
}

.line-chart {
  width: 100%;
  height: 150px;
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  font-size: 12.5px;
  color: var(--text-secondary);
  text-align: center;
  padding: 0 20px;
}

@media (max-width:400px) {
  .country-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .app-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rank-hero {
    display: flex;
  }

  .upgrade-banner,
  .profile-top {
    display: grid;
  }

}

/* ---- deposit / withdraw ---- */
.field {
  margin-bottom: 16px;
}

.field:last-child {
  margin-bottom: 0;
}

.field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.field label .max-link {
  color: var(--brand-green);
  font-weight: 800;
  cursor: pointer;
}

.input-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--card-border-strong);
  border-radius: 12px;
  padding: 0 14px;
  height: 48px;
}

.input-box:focus-within {
  border-color: var(--brand-green);
}

.input-box input,
.input-box select {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  height: 100%;
}

.input-box input::placeholder {
  color: var(--text-tertiary);
  font-weight: 600;
}

.input-box .prefix {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.input-box .unit-pill {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.input-box .copy-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}

.input-box .copy-btn svg {
  width: 14px;
  height: 14px;
}

.net-tabs {
  display: flex;
  gap: 8px;
}

.net-tab {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1px solid var(--card-border-strong);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.net-tab.active {
  background: rgba(34, 197, 94, 0.14);
  border-color: var(--brand-green);
  color: var(--brand-green);
}

.qr-deposit-card {
  text-align: center;
  padding: 20px;
}

.qr-deposit-card .qr-box {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
}

.qr-deposit-card .qr-box svg {
  width: 100%;
  height: 100%;
}

.qr-deposit-card .qr-hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 12px;
}

.summary-box {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 16px;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12.5px;
}

.summary-row .sr-label {
  color: var(--text-secondary);
}

.summary-row .sr-value {
  font-weight: 800;
}

.summary-row.total {
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
  padding-top: 10px;
  font-size: 14px;
}

.summary-row.total .sr-value {
  color: var(--brand-green);
  font-size: 16px;
}

.note-box {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.note-box.info {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.note-box .nb-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-orange);
  flex-shrink: 0;
  margin-top: 1px;
}

.note-box.info .nb-icon {
  color: var(--accent-blue);
}

.note-box .nb-text {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.note-box .nb-text b {
  color: var(--text-primary);
}

.steps-vertical {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step-v {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.step-v .sv-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  color: var(--brand-green);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-v .sv-title {
  font-size: 13px;
  font-weight: 800;
}

.step-v .sv-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.5;
}

.wallet-tabs {
  display: flex;
  gap: 8px;
  padding: 2px;
  background: var(--card-bg-soft);
  border-radius: 14px;
}

.wallet-tabs .wt {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wallet-tabs .wt svg {
  width: 15px;
  height: 15px;
}

.wallet-tabs .wt.active {
  background: var(--brand-green);
  color: var(--text-on-brand);
}

.pkg-select-grid {
  display: flex;
  overflow: auto;
  gap: 10px;
}

.pkg-option {
  border: 1px solid var(--card-border-strong);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all .15s ease;
  background: var(--card-bg-soft);
}

.pkg-option:hover {
  border-color: var(--brand-green);
}

.pkg-option.selected {
  border-color: var(--brand-green);
  background: rgba(34, 197, 94, 0.1);
}

.pkg-option .po-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pkg-option .po-name {
  font-size: 13.5px;
  font-weight: 800;
}

.pkg-option .po-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--card-border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pkg-option.selected .po-check {
  border-color: var(--brand-green);
  background: var(--brand-green);
}

.pkg-option .po-check svg {
  width: 11px;
  height: 11px;
  color: var(--text-on-brand);
  display: none;
}

.pkg-option.selected .po-check svg {
  display: block;
}

.pkg-option .po-meta {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}

.pkg-option .po-meta div {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.pkg-option .po-meta b {
  display: block;
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 800;
  margin-top: 1px;
}

.agree-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.agree-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--brand-green);
  flex-shrink: 0;
}

.agree-row label {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.agree-row a {
  color: var(--brand-green);
  font-weight: 700;
}

@media (max-width:400px) {
  .pkg-select-grid {
    grid-template-columns: 1fr;
  }
}

.divider {
  width: 1px;
  height: 110px;
  background: var(--hairline);
}

.investment-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}


.investment-grid form {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 20px);
}

.px-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.pkg-select-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

.pkg-option {
  flex: 0 0 150px;
  min-width: 150px;
}

.investment-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

.investment-grid form {
  flex: 1;
  min-width: 0;
  width: 600px;
  /* Important */
}


/* ---------- airdrop card grid — every card is identical, always locked ---------- */
.pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding: 4px 20px 20px;
}

.pcard {
  position: relative;
  aspect-ratio: 3 / 4.4;
  border-radius: 16px;
  overflow: hidden;
  padding: 2px;
  isolation: isolate;
  background: linear-gradient(160deg, #3daf9300, #0f6b4f);
  /* box-shadow: 0 8px 22px -8px rgba(61, 175, 147, .55); */
  /* transition: transform .2s ease, box-shadow .2s ease; */
  /* animation: pcard-glow 3s ease-in-out infinite; */
}

.pcard:hover {
  transform: translateY(-4px) scale(1.02);
}

.pcard-inner {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 14px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(61, 175, 147, .22) 0%, var(--bg-elevated) 65%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  text-align: center;
  overflow: hidden;
}

.pcard-inner::before {
  /* holo shine sweep */
  content: '';
  position: absolute;
  inset: -60% -20%;
  z-index: 1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}

.pcard:hover .pcard-inner::before {
  transform: translateX(120%);
}

.pcard-rarity {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  color: #fff;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-green-bright));
}

.pcard-edition {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  color: var(--text-tertiary);
}

.pcard-glyph {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcard-glyph svg {
  width: 32px;
  height: 32px;
  color: var(--brand-green-bright);
  filter: drop-shadow(0 0 8px rgba(46, 232, 120, .55));
  animation: pcard-lock-pulse 2.4s ease-in-out infinite;
}

.pcard-name {
  font-size: 12.5px;
  font-weight: 800;
  position: relative;
  z-index: 1;
  letter-spacing: .5px;
}

@keyframes pcard-glow {

  0%,
  100% {
    box-shadow: 0 8px 22px -8px rgba(61, 175, 147, .55);
  }

  50% {
    box-shadow: 0 10px 28px -6px rgba(46, 232, 120, .7);
  }
}

@keyframes pcard-lock-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .9;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* ---------- vault sealed — full-page state when the user owns zero cards ---------- */
.vault-sealed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  min-height: 60vh;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 30%, rgba(61, 175, 147, .1) 0%, transparent 65%);
}

.vault-sealed-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vault-sealed-ring::before,
.vault-sealed-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(61, 175, 147, .35);
  animation: vault-ripple 2.6s ease-out infinite;
}

.vault-sealed-ring::after {
  animation-delay: 1.3s;
}

@keyframes vault-ripple {
  0% {
    transform: scale(.7);
    opacity: .8;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.vault-sealed-badge {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--card-border-strong), var(--card-bg-soft));
  border: 1px solid var(--card-border);
  animation: vault-float 3s ease-in-out infinite;
}

.vault-sealed-badge svg {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
}

@keyframes vault-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.vault-sealed h2 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 8px;
}

.vault-sealed p {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width:520px) {
  .pcard-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 4px 16px 20px;
  }

  .pcard-glyph svg {
    width: 26px;
    height: 26px;
  }

  .pcard-name {
    font-size: 11px;
  }

  .vault-sealed {
    padding: 56px 20px;
    min-height: 50vh;
  }
}

option {
  background: var(--card-bg-soft);
  color: var(--text-secondary);
}

/* ---------- Personal Information page: layout-only restyle (stat strip + full-width form) ---------- */
.pi-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.pi-stat {
  border: 1px solid var(--hairline);
  background: var(--input-bg);
  border-radius: 14px;
  padding: 14px 16px;
}

.pi-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.pi-stat-value {
  font-size: 17px;
  font-weight: 800;
  margin-top: 6px;
}

@media (max-width: 860px) {
  .pi-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   REUSABLE COMPONENTS
   ============================================================ */

.section-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 2px;
}

.section-sub {
  font-size: 10px;
  color: var(--text-secondary);
}

/* ---- generic row list (transactions / income history) ---- */
.row-list {
  display: flex;
  flex-direction: column;
}

.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}

.row-item:last-child {
  border-bottom: none;
}

.row-item .ri-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-item .ri-icon svg {
  width: 18px;
  height: 18px;
}

.row-item .ri-mid {
  flex: 1;
  min-width: 0;
}

.row-item .ri-title {
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.row-item .ri-time {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.row-item .ri-right {
  text-align: right;
  flex-shrink: 0;
}

.row-item .ri-amount {
  font-size: 13.5px;
  font-weight: 800;
}

.row-item .ri-status {
  font-size: 11px;
  color: var(--brand-green);
  font-weight: 600;
  margin-top: 2px;
}

.row-item .ri-status.pending {
  color: var(--accent-orange);
}

.row-item .chev {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
}

.px-card {
  padding: 18px 20px;
}

/* ---- income tile grid ---- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 20px 18px;
}

.tile {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px;
  transition: border-color .2s ease, transform .2s ease;
}

.tile:hover {
  border-color: var(--card-border-strong);
  transform: translateY(-2px);
}

.tile .icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  margin-bottom: 8px;
}

.tile .icon-badge svg {
  width: 15px;
  height: 15px;
}

.tile .t-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

.tile .t-value {
  font-size: 15px;
  font-weight: 800;
  margin-top: 2px;
}

.tile .t-delta {
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ---- bar chart ---- */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 150px;
  padding: 16px 20px 0;
}

.bar-chart .bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.bar-chart .bar {
  width: 100%;
  max-width: 26px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--brand-green-bright), var(--brand-green-dim));
  transition: height .5s ease, filter .15s ease;
  cursor: default;
}

.bar-chart .bar-col:hover .bar {
  filter: brightness(1.2);
}

.bar-chart .bar-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.bar-chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-tertiary);
  padding: 0 6px 0 20px;
  height: 150px;
}

/* ---- donut ---- */
.donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut {
  --pct: 135;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: conic-gradient(var(--brand-green-bright) calc(var(--pct)*1%), var(--input-bg) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  filter: drop-shadow(0 0 14px rgba(46, 232, 120, .28));
}

.donut::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--bg);
}

.donut .donut-label {
  position: relative;
  text-align: center;
}

.donut .donut-label b {
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.donut .donut-label span {
  font-size: 8.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.donut-wrap .donut-label {
  text-align: center;
  pointer-events: none;
}

.donut-wrap .donut-label b {
  display: block;
  font-weight: 800;
}

.donut-wrap .donut-label span {
  font-size: 9.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.donut-seg {
  transition: stroke-width .15s ease, opacity .15s ease;
  cursor: default;
}

.donut-seg:hover {
  stroke-width: 13;
}

.donut-wrap:hover .donut-seg:not(:hover) {
  opacity: .45;
}

/* ---- team tree ---- */
.team-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 4px;
}

.tt-root {
  text-align: center;
}

.tt-root img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--brand-green);
  object-fit: cover;
}

.tt-root .tag {
  margin-top: 6px;
}

.tt-branches {
  display: flex;
  width: 100%;
  gap: 14px;
  justify-content: space-between;
}

.tt-branch {
  flex: 1;
  text-align: center;
}

.tt-branch-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.tt-avatars {
  display: flex;
  justify-content: center;
}

.tt-avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  object-fit: cover;
  margin-left: -10px;
}

.tt-avatars img:first-child {
  margin-left: 0;
}

.tt-more {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-left: -10px;
  border: 2px solid var(--card-bg);
  color: var(--text-secondary);
}

/* ---- country rows ---- */
.country-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 20px 20px;
}

.country-tile {
  text-align: center;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px 4px;
}

.country-tile .flag {
  font-size: 20px;
}

.country-tile .cn-count {
  font-size: 13px;
  font-weight: 800;
  margin-top: 4px;
}

.country-tile .cn-pct {
  font-size: 10px;
  color: var(--brand-green);
  font-weight: 700;
}

/* ---- rank ladder ---- */
.rank-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}

.rank-shield {
  width: 74px;
  height: 82px;
  flex-shrink: 0;
}

.rank-hero-mid {
  flex: 1;
}

.rank-hero-mid .rk-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.rank-hero-mid .rk-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-green);
}

.rank-hero-mid .rk-next {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rank-hero-right {
  text-align: right;
}

.rank-hero-right .rk-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.rank-hero-right .rk-reward {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-green);
}

.rank-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 20px 18px;
}

.rank-stats-row .rs {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px;
}

.rank-stats-row .rs-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rank-stats-row .rs-value {
  font-size: 15px;
  font-weight: 800;
  margin-top: 4px;
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  margin: 0 5px 10px;
}

.rank-row.current {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.rank-row:not(.current) {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.rank-row img,
.rank-row .rr-icon {
  width: 80px;
  height: 80px;
}

.rank-row .rr-mid {
  flex: 1;
}

.rank-row .rr-name {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rank-row .rr-detail {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}

.rank-row .rr-detail div {
  font-size: 11px;
  color: var(--text-secondary);
}

.rank-row .rr-detail b {
  display: block;
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 700;
}

.rank-row .rr-lock {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
}

/* ---- notification list ---- */
.notif-tabs {
  display: flex;
  gap: 8px;
  padding: 0 20px 4px;
  overflow-x: auto;
}

.notif-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}

.notif-tab .count {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 10.5px;
}

.notif-tab.active {
  background: var(--brand-green);
  color: var(--text-on-brand);
  border-color: var(--brand-green);
}

.notif-tab.active .count {
  background: rgba(0, 0, 0, 0.18);
}

.mark-read {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 20px;
  font-size: 12px;
  color: var(--brand-green);
  font-weight: 700;
}

.mark-read svg {
  width: 15px;
  height: 15px;
}

.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  margin: 0 20px 10px;
  position: relative;
}

.notif-item.unread {
  border-color: rgba(34, 197, 94, 0.3);
}

.notif-item .ni-title {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-item .ni-title .amt {
  color: var(--brand-green);
  font-weight: 800;
}

.notif-item .ni-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}

.notif-item .ni-time {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  margin-left: 8px;
}

.notif-item .ni-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.notif-item .unread-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-green);
  margin-right: 4px;
  flex-shrink: 0;
  align-self: center;
}

/* ---- profile ---- */
.profile-card {
    padding: 20px;
    background: linear-gradient(160deg, rgb(34 140 197 / 14%), transparent 70%);
    border: 1px solid rgb(34 101 197 / 25%);
}

.profile-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.profile-top img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-green);
}

.profile-top .p-name {
  font-size: 17px;
  font-weight: 800;
}

.profile-top .p-id {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.profile-top .p-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-top .p-meta div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-top .p-meta svg {
  width: 14px;
  height: 14px;
}

.qr-chip {
  text-align: center;
}

.qr-chip .qr-box {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.qr-chip .qr-box svg {
  width: 100%;
  height: 100%;
}

.qr-chip .qr-link {
  font-size: 10.5px;
  color: var(--brand-green);
  font-weight: 700;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: center;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.profile-stats .ps {
  text-align: center;
}

.profile-stats .ps-icon {
  width: 30px;
  height: 30px;
  margin: 0 auto 6px;
}

.profile-stats .ps-value {
  font-size: 14px;
  font-weight: 800;
}

.profile-stats .ps-label {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.profile-stats .ps-link {
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 4px;
}

.upgrade-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.upgrade-banner .ub-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.upgrade-banner .ub-icon svg {
  width: 22px;
  height: 22px;
  color: var(--brand-green);
}

.upgrade-banner .ub-mid {
  flex: 1;
}

.upgrade-banner .ub-title {
  font-size: 13.5px;
  font-weight: 800;
}

.upgrade-banner .ub-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.account-list .row-item {
  cursor: pointer;
}

.account-list .row-item:hover {
  background: var(--hover-bg);
  border-radius: 12px;
}

.app-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.app-info-grid .ai-tile {
  text-align: center;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.app-info-grid .ai-tile svg {
  width: 20px;
  height: 20px;
  margin: 0 auto 6px;
  color: var(--brand-green);
}

/* ---- support ---- */
.support-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.16), transparent 70%);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.support-hero .sh-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(61, 175, 147, .32), rgba(34, 197, 94, 0.12) 70%);
  box-shadow: 0 6px 18px -8px rgba(61, 175, 147, .5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-hero .sh-icon svg {
  width: 28px;
  height: 28px;
  color: var(--brand-green);
}

.support-hero .sh-title {
  font-size: 16px;
  font-weight: 800;
}

.support-hero .sh-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ---------- redesigned support hero (with ticket-count stats) ---------- */
.support-hero-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgb(61 88 175 / 16%), rgba(20, 25, 23, .5));
  border: 1px solid var(--card-border-strong);
  position: relative;
  overflow: hidden;
}

.support-hero-v2::after {
  content: '';
  position: absolute;
  right: -50px;
  top: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 107, 175, 0.28), transparent 70%);
}

.support-hero-v2 .sh-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(155deg, var(--accent-green), #237a63);
  box-shadow: 0 6px 16px -6px rgba(61, 175, 147, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.support-hero-v2 .sh-icon svg {
  width: 26px;
  height: 26px;
  color: #fff;
}

.support-hero-v2 .sh-title {
  font-size: 16.5px;
  font-weight: 800;
}

.support-hero-v2 .sh-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.support-hero-v2 .sh-stats {
  display: flex;
  gap: 22px;
  position: relative;
  z-index: 1;
}

.support-hero-v2 .sh-stat {
  text-align: center;
}

.support-hero-v2 .sh-stat b {
  display: block;
  font-size: 21px;
  font-weight: 800;
}

.support-hero-v2 .sh-stat span {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ---------- color-coded ticket cards ---------- */
.ticket-card {
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 14px 12px 18px;
  margin-bottom: 10px;
  background: var(--card-bg-soft);
  transition: transform .2s ease, border-color .2s ease;
}

.ticket-card:hover {
  transform: translateY(-2px);
  border-color: var(--card-border-strong);
}

.ticket-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 4px;
}

.ticket-card.status-open::before {
  background: var(--accent-blue);
}

.ticket-card.status-progress::before {
  background: var(--accent-orange);
}

.ticket-card.status-resolved::before {
  background: var(--brand-green);
}

.support-hours {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.support-hours .sh-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-hours .sh-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(34, 197, 94, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-green);
}

.support-hours .sh-ic svg {
  width: 19px;
  height: 19px;
}

.support-hours .sh-t {
  font-size: 13px;
  font-weight: 800;
}

.support-hours .sh-d {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.mail-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.mail-card .mc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(155deg, var(--accent-green), #237a63);
  box-shadow: 0 5px 14px -6px rgba(61, 175, 147, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.mail-card .mc-icon svg {
  width: 20px;
  height: 20px;
}

.mail-card .mc-title {
  font-size: 13.5px;
  font-weight: 800;
}

.mail-card .mc-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ---- referral ---- */
.referral-hero {
  padding: 20px;
  position: relative;
  overflow: hidden;
    background: linear-gradient(160deg, rgb(34 65 197 / 16%), transparent 65%);
    border: 1px solid rgb(34 123 197 / 25%);

}

.referral-hero .rh-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.referral-hero .rh-code {
  font-size: 24px;
  font-weight: 800;
  color: var(--brand-green);
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.referral-hero .rh-copy {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-green);
}

.referral-hero .rh-copy svg {
  width: 15px;
  height: 15px;
}

.referral-hero .rh-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 12px;
}

.link-row svg {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.link-row .url {
  flex: 1;
  font-size: 11.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-row .btn {
  padding: 7px 12px;
  font-size: 11.5px;
  flex-shrink: 0;
}

.stat4-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.stat4-grid .s4 {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
}

.stat4-grid .s4 .icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.stat4-grid .s4 .icon-badge svg {
  width: 16px;
  height: 16px;
}

.stat4-grid .s4-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

.stat4-grid .s4-value {
  font-size: 17px;
  font-weight: 800;
  margin-top: 2px;
}

.stat4-grid .s4-link {
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
}

.how-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 4px;
}

.how-step {
  text-align: center;
  flex: 1;
}

.how-step .hs-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.how-step .hs-circle svg {
  width: 22px;
  height: 22px;
}

.how-step .hs-num {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-green);
  color: var(--text-on-brand);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-step .hs-title {
  font-size: 12.5px;
  font-weight: 800;
}

.how-step .hs-desc {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}

.how-arrow {
  color: var(--text-tertiary);
  margin-top: 20px;
  width: 16px;
}

.share-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 4px 0;
}

.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.share-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.share-icon svg {
  width: 20px;
  height: 20px;
}

.promo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.promo-row .pr-icon {
  font-size: 26px;
}

.promo-row .pr-title {
  font-size: 13px;
  font-weight: 800;
}

.promo-row .pr-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.qr-scan-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.qr-scan-card .qr-box {
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 10px;
  padding: 5px;
}

.qr-scan-card .qr-box svg {
  width: 100%;
  height: 100%;
}

/* ---- wallet ---- */
.wallet-hero {
padding: 20px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, rgb(34 65 197 / 16%), transparent 65%);
    border: 1px solid rgb(34 116 197 / 25%);
}

.wallet-hero .wh-label {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.wallet-hero .wh-amount {
  font-size: 28px;
  font-weight: 800;
  margin-top: 6px;
}

.wallet-hero .wh-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.wallet-hero .wh-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.mywallet-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}

.switch {
  width: 38px;
  height: 22px;
  border-radius: 99px;
  background: var(--brand-green);
  position: relative;
  flex-shrink: 0;
}

.switch::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  right: 3px;
}

.wallet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
}

.wallet-row .wr-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 4px 12px -5px rgba(0, 0, 0, .5);
  background-image: linear-gradient(155deg, rgba(255, 255, 255, .18), transparent 60%);
}

.wallet-row .wr-mid {
  flex: 1;
}

.wallet-row .wr-name {
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wallet-row .wr-amount {
  font-size: 15px;
  font-weight: 800;
  margin-top: 3px;
}

.wallet-row .wr-usd {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.wallet-row .wr-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wallet-row .wr-actions .btn {
  padding: 6px 12px;
  font-size: 11px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.quick-actions .qa {
  text-align: center;
  padding: 4px;
  background: #262d603b;
  border-radius: 14px;
}

.quick-actions .qa .icon-badge {
  margin: 0 auto 6px;
}

.quick-actions .qa-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* ---- team page ---- */
.team-stats2 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.team-stats2 .ts-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-stats2 .ts-value {
  font-size: 19px;
  font-weight: 800;
}

.team-stats2 .ts-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.team-stats2 .ts-delta {
  font-size: 10.5px;
  color: var(--brand-green);
  font-weight: 700;
}

.team-stats2 .divider {
  width: 1px;
  height: 36px;
  background: var(--hairline);
}

.team-grid4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.team-grid4 .tg {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
}

.team-grid4 .tg-value {
  font-size: 18px;
  font-weight: 800;
  margin-top: 8px;
}

.team-grid4 .tg-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.team-grid4 .tg-delta {
  font-size: 10.5px;
  color: var(--brand-green);
  font-weight: 700;
  margin-top: 4px;
}

.line-chart {
  width: 100%;
  height: 150px;
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  font-size: 12.5px;
  color: var(--text-secondary);
  text-align: center;
  padding: 0 20px;
}

/* ---------- global hover tooltip (data-tip attribute) ---------- */
.chart-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background: var(--card-bg);
  border: 1px solid var(--card-border-strong);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-primary);
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  max-width: 200px;
  white-space: nowrap;
}

.chart-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

[data-tip] {
  position: relative;
}

@media (max-width:400px) {
  .country-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .app-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rank-hero {
    display: flex;
  }

  .upgrade-banner,
  .profile-top {
    display: grid;
  }

}

/* ---- deposit / withdraw ---- */
.field {
  margin-bottom: 16px;
}

.field:last-child {
  margin-bottom: 0;
}

.field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.field label .max-link {
  color: var(--brand-green);
  font-weight: 800;
  cursor: pointer;
}

.input-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--card-border-strong);
  border-radius: 12px;
  padding: 0 14px;
  height: 48px;
}

.input-box:focus-within {
  border-color: var(--brand-green);
}

.input-box input,
.input-box select {
  flex: 1;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  height: 100%;
}

.input-box input::placeholder {
  color: var(--text-tertiary);
  font-weight: 600;
}

.input-box .prefix {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.input-box .unit-pill {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.input-box .copy-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
}

.input-box .copy-btn svg {
  width: 14px;
  height: 14px;
}

.net-tabs {
  display: flex;
  gap: 8px;
}

.net-tab {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1px solid var(--card-border-strong);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
}

.net-tab.active {
  background: rgba(34, 197, 94, 0.14);
  border-color: var(--brand-green);
  color: var(--brand-green);
}

.qr-deposit-card {
  text-align: center;
  padding: 20px;
}

.qr-deposit-card .qr-box {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
}

.qr-deposit-card .qr-box svg {
  width: 100%;
  height: 100%;
}

.qr-deposit-card .qr-hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 12px;
}

.summary-box {
  background: var(--card-bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 16px;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12.5px;
}

.summary-row .sr-label {
  color: var(--text-secondary);
}

.summary-row .sr-value {
  font-weight: 800;
}

.summary-row.total {
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
  padding-top: 10px;
  font-size: 14px;
}

.summary-row.total .sr-value {
  color: var(--brand-green);
  font-size: 16px;
}

.note-box {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.note-box.info {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.note-box .nb-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-orange);
  flex-shrink: 0;
  margin-top: 1px;
}

.note-box.info .nb-icon {
  color: var(--accent-blue);
}

.note-box .nb-text {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.note-box .nb-text b {
  color: var(--text-primary);
}

.steps-vertical {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step-v {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.step-v .sv-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  color: var(--brand-green);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-v .sv-title {
  font-size: 13px;
  font-weight: 800;
}

.step-v .sv-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.5;
}

.wallet-tabs {
  display: flex;
  gap: 8px;
  padding: 2px;
  background: var(--card-bg-soft);
  border-radius: 14px;
}

.wallet-tabs .wt {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wallet-tabs .wt svg {
  width: 15px;
  height: 15px;
}

.wallet-tabs .wt.active {
  background: var(--brand-green);
  color: var(--text-on-brand);
}

.pkg-select-grid {
  display: flex;
  overflow: auto;
  gap: 10px;
}

.pkg-option {
  border: 1px solid var(--card-border-strong);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all .15s ease;
  background: var(--card-bg-soft);
}

.pkg-option:hover {
  border-color: var(--brand-green);
}

.pkg-option.selected {
  border-color: var(--brand-green);
  background: rgba(34, 197, 94, 0.1);
}

.pkg-option .po-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pkg-option .po-name {
  font-size: 13.5px;
  font-weight: 800;
}

.pkg-option .po-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--card-border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pkg-option.selected .po-check {
  border-color: var(--brand-green);
  background: var(--brand-green);
}

.pkg-option .po-check svg {
  width: 11px;
  height: 11px;
  color: var(--text-on-brand);
  display: none;
}

.pkg-option.selected .po-check svg {
  display: block;
}

.pkg-option .po-meta {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}

.pkg-option .po-meta div {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.pkg-option .po-meta b {
  display: block;
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 800;
  margin-top: 1px;
}

.agree-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.agree-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--brand-green);
  flex-shrink: 0;
}

.agree-row label {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.agree-row a {
  color: var(--brand-green);
  font-weight: 700;
}

@media (max-width:400px) {
  .pkg-select-grid {
    grid-template-columns: 1fr;
  }
}

textarea {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--card-border-strong);
  border-radius: 12px;
  color: var(--text-primary);
  padding: 0 14px;
  height: 48px;
}

.divider {
  width: 1px;
  height: 110px;
  background: var(--hairline);
}

.investment-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}


.investment-grid form {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 20px);
}

.px-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.pkg-select-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

.pkg-option {
  flex: 0 0 150px;
  min-width: 150px;
}

.investment-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

.investment-grid form {
  flex: 1;
  min-width: 0;
  width: 600px;
  /* Important */
}


/* ---------- airdrop card grid — every card is identical, always locked ---------- */
.pcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding: 4px 20px 20px;
}

.pcard {
  position: relative;
  aspect-ratio: 3 / 5.4;
  border-radius: 16px;
  overflow: hidden;
  padding: 2px;
  isolation: isolate;
  background: linear-gradient(160deg, #3daf9300, #0f6b4f);
  /* box-shadow: 0 8px 22px -8px rgba(61, 175, 147, .55); */
  /* transition: transform .2s ease, box-shadow .2s ease; */
  /* animation: pcard-glow 3s ease-in-out infinite; */
}

.pcard:hover {
  transform: translateY(-4px) scale(1.02);
}

.pcard-inner {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 14px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(61, 175, 147, .22) 0%, var(--bg-elevated) 65%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  text-align: center;
  overflow: hidden;
}

.pcard-inner::before {
  /* holo shine sweep */
  content: '';
  position: absolute;
  inset: -60% -20%;
  z-index: 1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}

.pcard:hover .pcard-inner::before {
  transform: translateX(120%);
}

.pcard-rarity {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  color: #fff;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-green-bright));
}

.pcard-edition {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  color: var(--text-tertiary);
}

.pcard-glyph {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcard-glyph svg {
  width: 32px;
  height: 32px;
  color: var(--brand-green-bright);
  filter: drop-shadow(0 0 8px rgba(46, 232, 120, .55));
  animation: pcard-lock-pulse 2.4s ease-in-out infinite;
}

.pcard-name {
  font-size: 12.5px;
  font-weight: 800;
  position: relative;
  z-index: 1;
  letter-spacing: .5px;
}

@keyframes pcard-glow {

  0%,
  100% {
    box-shadow: 0 8px 22px -8px rgba(61, 175, 147, .55);
  }

  50% {
    box-shadow: 0 10px 28px -6px rgba(46, 232, 120, .7);
  }
}

@keyframes pcard-lock-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .9;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* ---------- vault sealed — full-page state when the user owns zero cards ---------- */
.vault-sealed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  min-height: 60vh;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 30%, rgba(61, 175, 147, .1) 0%, transparent 65%);
}

.vault-sealed-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vault-sealed-ring::before,
.vault-sealed-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(61, 175, 147, .35);
  animation: vault-ripple 2.6s ease-out infinite;
}

.vault-sealed-ring::after {
  animation-delay: 1.3s;
}

@keyframes vault-ripple {
  0% {
    transform: scale(.7);
    opacity: .8;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.vault-sealed-badge {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--card-border-strong), var(--card-bg-soft));
  border: 1px solid var(--card-border);
  animation: vault-float 3s ease-in-out infinite;
}

.vault-sealed-badge svg {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
}

@keyframes vault-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.vault-sealed h2 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 8px;
}

.vault-sealed p {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width:520px) {
  .pcard-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 4px 0px 20px;
  }

  .pcard-glyph svg {
    width: 26px;
    height: 26px;
  }

  .pcard-name {
    font-size: 11px;
  }

  .vault-sealed {
    padding: 56px 20px;
    min-height: 50vh;
  }
}

option {
  background: var(--card-bg-soft);
  color: var(--text-secondary);
}

/* ---------- Personal Information page: layout-only restyle (stat strip + full-width form) ---------- */
.pi-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.pi-stat {
  border: 1px solid var(--hairline);
  background: var(--input-bg);
  border-radius: 14px;
  padding: 14px 16px;
}

.pi-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.pi-stat-value {
  font-size: 17px;
  font-weight: 800;
  margin-top: 6px;
}

@media (max-width: 860px) {
  .pi-stats {
    grid-template-columns: 1fr 1fr;
  }
}