/* User app styles (neomorphism) */
/* ===================== NEOMORPHISM THEME (SOFT UI / DARK) ===================== */
:root {
  /* Original variable names kept so JS / inline styles keep working */
  --primary-bg: #e8ebf2;
  --secondary-bg: #e8ebf2;
  --card-bg: #e8ebf2;
  --text-primary: #2d3340;
  --text-secondary: #7a8294;
  --accent-color: #f8c015;
  --accent-gradient: linear-gradient(145deg, #fbbf24, #f59e0b);
  --primary-button-bg: #3b82f6;
  --border-color: #e8ebf2;
  --bottom-nav-bg: #e8ebf2;
  --success-color: #10b981;
  --danger-color: #ef4444;
  --warning-color: #f59e0b;
  --info-color: #3b82f6;

  /* Neomorphism shadow tokens (LIGHT) */
  --nm-bg: #e8ebf2;
  --nm-dark: #c2c6d2;
  --nm-light: #ffffff;
  --nm-out: 7px 7px 16px var(--nm-dark), -7px -7px 16px var(--nm-light);
  --nm-out-sm: 4px 4px 9px var(--nm-dark), -4px -4px 9px var(--nm-light);
  --nm-in: inset 5px 5px 10px var(--nm-dark), inset -5px -5px 10px var(--nm-light);
  --nm-in-sm: inset 3px 3px 6px var(--nm-dark), inset -3px -3px 6px var(--nm-light);
  --nm-radius: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--nm-bg);
  color: var(--text-primary);
  padding-top: 70px; padding-bottom: 86px;
  min-height: 100vh; overscroll-behavior-y: auto; overflow-x: hidden;
}
a { color: var(--accent-color); text-decoration: none; }
a:hover { color: #fbbf24; }

.main-content { padding: 18px; }
.section { display: none; animation: fadeIn 0.3s ease-in-out; }
.section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.section-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; color: var(--text-primary); letter-spacing: .3px; }

/* ---- Neomorphic base elements ---- */
.custom-card {
  background-color: var(--card-bg);
  border-radius: var(--nm-radius);
  padding: 18px; margin-bottom: 16px;
  box-shadow: var(--nm-out);
  border: none;
  transition: box-shadow 0.25s ease;
}
.custom-card:hover { box-shadow: 9px 9px 20px var(--nm-dark), -9px -9px 20px var(--nm-light); }

.btn-custom {
  border-radius: 14px; font-size: 0.9rem; font-weight: 600;
  padding: 11px 18px; border: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--nm-bg); color: var(--text-primary);
  box-shadow: var(--nm-out-sm);
  transition: box-shadow 0.15s ease, color 0.15s ease, transform 0.1s ease;
  cursor: pointer;
}
.btn-custom:active { box-shadow: var(--nm-in-sm); transform: translateY(1px); }
.btn-custom-primary { color: #cfe0ff; }
.btn-custom-primary:hover { color: #ffffff; }
.btn-custom-secondary { color: var(--text-primary); }
.btn-custom-accent { background: var(--accent-gradient); color: #1e2027; font-weight: 700; box-shadow: var(--nm-out-sm); }
.btn-custom-accent:hover { color: #1e2027; filter: brightness(1.05); }
.btn-custom-accent:active { box-shadow: var(--nm-in-sm); }
.btn-custom-link { background: none; border: none; color: var(--primary-button-bg); font-size: 0.9rem; font-weight: 600; padding: 0; cursor: pointer; box-shadow: none; }
.btn-custom-link:active { box-shadow: none; }

.text-accent { color: var(--accent-color); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }
.text-info { color: var(--info-color); }
.text-light { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary) !important; }

.form-control {
  background-color: var(--nm-bg); border: none; color: var(--text-primary);
  border-radius: 14px; box-shadow: var(--nm-in); padding: 10px 14px;
}
.form-control:focus {
  background-color: var(--nm-bg); border: none; color: var(--text-primary);
  box-shadow: var(--nm-in), 0 0 0 2px var(--accent-color); outline: none;
}
.form-control::placeholder { color: var(--text-secondary); opacity: .7; }
.form-label { color: var(--text-secondary); font-size: .85rem; }

.alert { border-radius: 14px; font-size: .9rem; border: none; box-shadow: var(--nm-in); background: var(--nm-bg); color: var(--text-primary); }
.alert-success { color: var(--success-color); }
.alert-danger { color: var(--danger-color); }
.alert-warning { color: var(--warning-color); }

.list-group-item {
  background-color: var(--nm-bg); color: var(--text-primary); border: none;
  border-radius: 14px; margin-bottom: 12px; padding: 15px 16px;
  box-shadow: var(--nm-in); font-size: .95rem; transition: box-shadow .2s ease;
}
.list-group-item:last-child { margin-bottom: 0; }
.list-group-item:hover { background-color: var(--nm-bg); box-shadow: var(--nm-in); }
.list-group-item i:first-child { color: var(--accent-color); margin-right: 15px; font-size: 1.1rem; width: 20px; text-align: center; }
.list-group-item .bi-chevron-right { color: var(--text-secondary); font-size: .9rem; }

#globalLoaderEl { position: fixed; inset: 0; background: rgba(18,20,26,0.6); display: flex; justify-content: center; align-items: center; z-index: 9999; display: none; }
.spinner-border { color: var(--accent-color); width: 3rem; height: 3rem; }

.placeholder-glow .placeholder { background-color: var(--nm-dark); animation: placeholder-glow 2s ease-in-out infinite; border-radius: 10px; }
.placeholder { background-color: var(--nm-dark); border-radius: 10px; }
@keyframes placeholder-glow { 0% { background-color: var(--nm-dark); } 50% { background-color: #2a2d36; } 100% { background-color: var(--nm-dark); } }

.interactive-list-item { cursor: pointer; }
.referral-code { font-family: monospace; letter-spacing: 1px; user-select: all; }

/* ---- Header ---- */
.app-header {
  position: fixed; top: 0; left: 0; width: 100%; height: 62px;
  background-color: var(--nm-bg); display: flex; align-items: center; justify-content: space-between;
  padding: 0 15px; z-index: 1000; border: none;
  box-shadow: 0 6px 16px var(--nm-dark), 0 -2px 12px var(--nm-light);
}
.header-left { display: flex; align-items: center; gap: 10px; }
.header-logo { width: 40px; height: 40px; border-radius: 50%; background: #fff; object-fit: cover; box-shadow: var(--nm-out-sm); }
.header-title { font-size: .9rem; font-weight: 500; line-height: 1.2; }
.header-title span { font-size: .75rem; color: var(--text-secondary); display: block; }
.header-back-button { background: none; border: none; color: var(--text-primary); font-size: 1.4rem; margin-right: 5px; display: none; padding: 5px; box-shadow: none; }
.header-right { display: flex; align-items: center; gap: 15px; }
.notification-icon { font-size: 1.3rem; color: var(--text-primary); position: relative; background: none; border: none; padding: 0; box-shadow: none; }
.notification-badge { position: absolute; top: -3px; right: -5px; background-color: var(--danger-color); color: #fff; font-size: .6rem; width: 16px; height: 16px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; }
.wallet-chip { background: var(--accent-gradient); color: #1e2027; font-weight: 700; padding: 7px 14px; border-radius: 20px; display: flex; align-items: center; font-size: .85rem; border: none; cursor: pointer; box-shadow: var(--nm-out-sm); }
.wallet-chip i { margin-right: 5px; font-size: .9rem; }
.header-game-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-left: 10px; display: none; }

/* ---- Bottom nav ---- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; width: 100%; height: 74px;
  background-color: var(--nm-bg); display: flex; justify-content: space-around; align-items: stretch;
  z-index: 1000; border: none; padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 16px var(--nm-dark), 0 2px 12px var(--nm-light);
}
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); text-decoration: none; flex-grow: 1; padding: 8px 0; transition: color .2s ease; border: none; background: none; cursor: pointer; font-size: .7rem; }
.nav-item i { font-size: 1.4rem; margin-bottom: 4px; line-height: 1; }
.nav-item span { font-size: .7rem; font-weight: 500; line-height: 1; }
.nav-item.active { color: var(--accent-color); }
.nav-item.active i { filter: drop-shadow(0 0 6px rgba(248,192,21,.55)); }

/* ---- Bootstrap .btn overrides (neomorphism) ---- */
.btn { border: none; box-shadow: var(--nm-out-sm); background: var(--nm-bg); color: var(--text-primary); border-radius: 14px; }
.btn:focus, .btn:active:focus { outline: none; box-shadow: var(--nm-out-sm); }
.btn:active { box-shadow: var(--nm-in-sm); }
.btn-sm { padding: 8px 14px; border-radius: 12px; }
.btn-primary { background-color: var(--primary-button-bg); color: #fff; box-shadow: var(--nm-out-sm); }
.btn-primary:hover { background-color: #2563eb; color: #fff; }
.btn-secondary { background-color: var(--nm-bg); color: var(--text-primary); }
.btn-success { background-color: var(--success-color); color: #fff; box-shadow: var(--nm-out-sm); }
.btn-success:hover { background-color: #0ea372; color: #fff; }
.btn-danger { background-color: var(--danger-color); color: #fff; box-shadow: var(--nm-out-sm); }
.btn-danger:hover { background-color: #dc2626; color: #fff; }
.btn-link { background: none; box-shadow: none; color: var(--accent-color); }
.btn-link:active { box-shadow: none; }
.btn-close-white { filter: none; opacity: .65; }
.btn-outline-warning { background: var(--nm-bg); border: 1px solid var(--accent-color); color: var(--accent-color); box-shadow: var(--nm-out-sm); border-radius: 10px; }
.btn-outline-warning:hover { background: var(--accent-color); color: #1e2027; }

/* ---- Swiper / promotion ---- */
.swiper-container#promotionSliderEl {
  width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 20px; margin-bottom: 20px;
  --swiper-pagination-color: var(--accent-color);
  --swiper-pagination-bullet-inactive-color: var(--text-secondary);
  --swiper-pagination-bullet-size: 8px;
  box-shadow: var(--nm-out); padding: 10px; background: var(--nm-bg);
}
.swiper-slide { background-color: var(--nm-bg); border-radius: 16px; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }

/* ---- Game cards ---- */
.game-card { text-align: center; background-color: var(--nm-bg); border-radius: 18px; overflow: hidden; padding: 0; cursor: pointer; box-shadow: var(--nm-out); transition: box-shadow .2s ease, transform .2s ease; }
.game-card:hover { transform: translateY(-3px); box-shadow: 9px 9px 20px var(--nm-dark), -9px -9px 20px var(--nm-light); }
.game-card img { width: 100%; height: 100px; object-fit: cover; display: block; }
.game-card span { display: block; padding: 10px 5px; font-weight: 600; font-size: .8rem; color: var(--text-primary); }
#gamesListEl.row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }

/* ---- Tournament tabs ---- */
.tournament-tabs { display: flex; justify-content: space-around; background-color: var(--nm-bg); padding: 6px; border-radius: 16px; margin-bottom: 16px; box-shadow: var(--nm-in); }
.tab-item { color: var(--text-secondary); background: none; border: none; padding: 9px 10px; font-size: .85rem; font-weight: 600; border-radius: 12px; flex-grow: 1; text-align: center; cursor: pointer; transition: all .2s; }
.tab-item.active { background: var(--nm-bg); color: var(--accent-color); box-shadow: var(--nm-out-sm); }
.tab-item i { margin-right: 5px; }

/* ---- Tournament card ---- */
.tournament-card { background-color: var(--nm-bg); border-radius: 22px; margin-bottom: 16px; padding: 0; box-shadow: var(--nm-out); overflow: hidden; border: none; }
.tournament-banner-image { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; background-color: var(--nm-dark); }
.tournament-card-content { padding: 16px; }
.tournament-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 5px; }
.tournament-card-tags span { background: var(--nm-bg); color: var(--text-secondary); font-size: .7rem; font-weight: 500; padding: 5px 10px; border-radius: 10px; display: inline-block; box-shadow: var(--nm-in-sm); margin-right: 4px; margin-bottom: 4px; }
.tournament-card-timer { background: var(--nm-bg); color: var(--text-primary); font-size: .75rem; font-weight: 600; padding: 5px 10px; border-radius: 10px; box-shadow: var(--nm-in-sm); }
.tournament-card-title { font-size: 1rem; font-weight: 600; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }
.tournament-card-title i { color: var(--accent-color); }
.tournament-card-info { display: flex; justify-content: space-between; align-items: stretch; border-top: 1px solid var(--nm-dark); border-bottom: 1px solid var(--nm-dark); padding: 12px 0; margin: 12px 0; font-size: .8rem; }
.info-item { text-align: center; flex: 1; padding: 0 5px; }
.info-item span { display: block; color: var(--text-secondary); font-size: .7rem; margin-bottom: 2px; }
.info-item strong { color: var(--text-primary); font-weight: 600; font-size: .9rem; }
.info-item .prize-icon { color: var(--accent-color); font-size: 1.2rem; }
.tournament-card-spots { font-size: .8rem; color: var(--text-secondary); margin-bottom: 15px; }
.tournament-card-spots span { font-weight: 600; }
.progress { height: 8px; background: var(--nm-dark); border-radius: 4px; overflow: hidden; box-shadow: var(--nm-in-sm); }
.progress-bar { background: var(--accent-color); transition: width .3s ease; }
.tournament-card-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; margin-top: 10px; }
.tournament-card-actions .btn-sm { padding: 9px 10px; font-size: .85rem; width: 100%; }
.tournament-card-actions .btn-join { background: var(--accent-gradient); color: #1e2027; font-weight: 700; box-shadow: var(--nm-out-sm); }
.tournament-card-actions .btn-details { background: var(--nm-bg); color: var(--text-primary); box-shadow: var(--nm-out-sm); }
.tournament-card-actions .btn-joined { background: var(--nm-bg); color: var(--success-color); box-shadow: var(--nm-in-sm); }
.tournament-card-actions .btn-disabled { background: var(--nm-bg); opacity: .6; color: var(--text-secondary); box-shadow: var(--nm-out-sm); }
.tournament-card-actions .btn-join:active, .tournament-card-actions .btn-details:active, .tournament-card-actions .btn-joined:active { box-shadow: var(--nm-in-sm); }
.btn-idpass { background: var(--accent-gradient); color: #1e2027; border: none; font-weight: 700; box-shadow: var(--nm-out-sm); }
.btn-idpass:active { box-shadow: var(--nm-in-sm); }

/* ---- Wallet ---- */
.wallet-card { background: var(--nm-bg); border-radius: 24px; padding: 24px; box-shadow: var(--nm-out); position: relative; overflow: hidden; border: none; }
.wallet-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: rgba(248,192,21,.06); border-radius: 50%; }
.wallet-header { text-align: center; margin-bottom: 25px; }
.wallet-header .balance-label { font-size: .9rem; color: var(--text-secondary); }
.wallet-header .total-balance { font-size: 2.5rem; font-weight: 700; color: var(--text-primary); letter-spacing: 1px; }
.wallet-breakdown { display: flex; justify-content: space-around; margin-bottom: 25px; padding: 16px 0; background: var(--nm-bg); border-radius: 16px; box-shadow: var(--nm-in); }
.breakdown-item { text-align: center; }
.breakdown-item .amount { font-weight: 600; font-size: 1.1rem; }
.breakdown-item .label { font-size: .8rem; color: var(--text-secondary); }
.wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.wallet-actions .btn-action { padding: 14px; font-size: 1rem; font-weight: 600; border: none; border-radius: 16px; box-shadow: var(--nm-out-sm); cursor: pointer; }
.btn-action.btn-add-money { background: var(--success-color); color: #fff; }
.btn-action.btn-withdraw-money { background: var(--nm-bg); color: var(--text-primary); }
.wallet-actions .btn-action:active { box-shadow: var(--nm-in-sm); }
.transactions-link { text-align: center; margin-top: 20px; }
.transactions-link a { color: var(--accent-color); font-weight: 500; }

#recentTransactionsListEl .custom-card { background-color: var(--nm-bg); box-shadow: var(--nm-out); }
#earnings-section .custom-card { text-align: center; box-shadow: var(--nm-out); }
#earnings-section .display-4 { font-size: 3rem; }
#earnings-section p strong { color: var(--text-primary); }

/* ---- Profile ---- */
.profile-header-card { background: var(--nm-bg); border-radius: 22px; padding: 20px; margin-bottom: 20px; box-shadow: var(--nm-out); border: none; }
.profile-main-info { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--nm-dark); }
.profile-avatar-wrapper { position: relative; cursor: pointer; flex-shrink: 0; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--nm-bg); box-shadow: var(--nm-out-sm); }
.profile-avatar-overlay { position: absolute; inset: 0; width: 72px; height: 72px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity .2s; }
.profile-avatar-wrapper:hover .profile-avatar-overlay { opacity: 1; }
#profileAvatarInput { display: none; }
.profile-user-details { flex-grow: 1; }
.profile-name { font-size: 1.1rem; font-weight: 600; margin-bottom: 2px; }
.profile-name-container { display: flex; align-items: center; gap: 10px; }
.edit-name-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1rem; box-shadow: none; }
.profile-email { font-size: .85rem; color: var(--text-secondary); word-break: break-all; }
.profile-stats { display: flex; justify-content: space-around; width: 100%; }
.stat-item { text-align: center; flex: 1; }
.stat-item strong { display: block; font-size: 1rem; font-weight: 600; }
.stat-item span { font-size: .75rem; color: var(--text-secondary); }
.profile-links .list-group { border-radius: 20px; overflow: hidden; border: none; box-shadow: var(--nm-out); padding: 14px; }
.profile-links .form-switch .form-check-input { background-color: var(--nm-dark); border-color: var(--nm-dark); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e"); }
.profile-links .form-switch .form-check-input:checked { background-color: var(--accent-color); border-color: var(--accent-color); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }

/* ---- Login section ---- */
#login-section { margin-top: 5vh; }
#login-section .card { background-color: var(--nm-bg); border: none; box-shadow: var(--nm-out); border-radius: 22px; }
#login-section .btn-primary { background-color: var(--primary-button-bg); border: none; box-shadow: var(--nm-out-sm); color: #fff; border-radius: 14px; }
#login-section .btn-primary:hover { background: #2563eb; }
#login-section .btn-link { background: none; border: none; color: var(--accent-color); box-shadow: none; font-size: .9em; padding: 5px 0; }
#login-section .btn-success { background-color: var(--success-color); border: none; box-shadow: var(--nm-out-sm); color: #fff; border-radius: 14px; }
#login-section .btn-danger { background-color: var(--danger-color); border: none; box-shadow: var(--nm-out-sm); color: #fff; border-radius: 14px; }
#login-section .form-divider { text-align: center; margin: 20px 0; position: relative; color: var(--text-secondary); }
#login-section .form-divider::before, #login-section .form-divider::after { content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background-color: var(--nm-dark); }
#login-section .form-divider::before { left: 0; }
#login-section .form-divider::after { right: 0; }
#login-section .form-divider span { background-color: var(--nm-bg); padding: 0 10px; position: relative; z-index: 1; font-size: .8rem; font-weight: 500; }
#login-section .card-title { color: var(--text-primary); }
#googleSignInBtnMainEl { display: none; }

/* ---- Modals ---- */
.modal-content { background-color: var(--nm-bg); color: var(--text-primary); border: none; box-shadow: var(--nm-out); border-radius: 22px; }
.modal-header { border-bottom: 1px solid var(--nm-dark); }
.modal-footer { border-top: 1px solid var(--nm-dark); }
.btn-close-white { filter: none; opacity: .65; }
.modal-body .phonepe-number { color: var(--warning-color); font-weight: bold; user-select: text; }
#matchDetailsModalBodyEl pre { background-color: var(--nm-bg); padding: 10px; border-radius: 12px; border: none; color: var(--text-secondary); font-size: .85rem; white-space: pre-wrap; word-wrap: break-word; box-shadow: var(--nm-in); }
#policyModalBodyEl { line-height: 1.6; font-size: .95rem; white-space: pre-wrap; }
#idPasswordModalEl .copy-btn { padding: 2px 6px; font-size: .8rem; margin-left: 8px; vertical-align: middle; }
#policyModalBodyEl .copy-btn, #policyModalBodyEl #shareReferralBtn { padding: 4px 10px; font-size: .9rem; }
#policyModalBodyEl #shareReferralBtn i, #policyModalBodyEl .copy-btn i { margin-right: 5px; }
#idPasswordModalEl .p-3 { box-shadow: var(--nm-in); }
#securityWarning { background-color: var(--danger-color); color: #fff; padding: 10px 15px; text-align: center; font-size: .9rem; position: sticky; top: 60px; z-index: 999; border-bottom: 1px solid #a51d1d; }
#securityWarning a { color: #ffdddd; text-decoration: underline; }
#securityWarning button { background: none; border: 1px solid #fff; color: #fff; padding: 2px 8px; margin-left: 15px; font-size: .8rem; border-radius: 4px; cursor: pointer; }

/* ---- Recharge ---- */
.recharge-card { background-color: var(--nm-bg); border-radius: 22px; padding: 20px; margin-bottom: 20px; box-shadow: var(--nm-out); border: none; }
.amount-input-group { position: relative; }
.amount-input-group .form-control { font-size: 2rem; font-weight: 700; padding-left: 38px; border: none; background: var(--nm-bg); box-shadow: var(--nm-in); border-radius: 16px; text-align: center; }
.amount-input-group .rupee-symbol { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; font-weight: 700; color: var(--text-secondary); }
.amount-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.amount-preset-btn { background-color: var(--nm-bg); border: none; color: var(--text-primary); padding: 12px; border-radius: 14px; font-weight: 600; cursor: pointer; transition: all .2s; box-shadow: var(--nm-out-sm); }
.amount-preset-btn:hover { color: var(--accent-color); }
.amount-preset-btn:active { box-shadow: var(--nm-in-sm); }
.payment-option-card { background-color: var(--nm-bg); border: 2px solid transparent; border-radius: 16px; padding: 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: all .2s; margin-bottom: 15px; box-shadow: var(--nm-out-sm); }
.payment-option-card.selected { box-shadow: var(--nm-in-sm); border-color: var(--accent-color); }
.payment-option-card img { height: 25px; max-width: 80px; object-fit: contain; }
.payment-option-card .form-check-input { float: right; margin-left: 10px; background-color: var(--nm-dark); border-color: var(--nm-dark); box-shadow: none; }
.payment-option-card .form-check-input:checked { background-color: var(--accent-color); border-color: var(--accent-color); }
.payment-details-card { background-color: var(--nm-bg); border-radius: 16px; padding: 16px; border: none; box-shadow: var(--nm-in); }
.payment-details-card .qr-code-container { width: 150px; height: 150px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: var(--nm-out-sm); }
.payment-details-card .qr-code-container img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.vertical-stepper { position: relative; padding-left: 40px; margin-bottom: 20px; }
.vertical-stepper::before { content: ''; position: absolute; left: 14px; top: 5px; bottom: 5px; width: 2px; background-color: var(--danger-color); }
.vertical-stepper .step-icon { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background-color: var(--danger-color); color: #fff; display: flex; align-items: center; justify-content: center; }
.step-content h5 { font-size: 1rem; font-weight: 600; margin-bottom: 5px; }
.step-content p { font-size: .85rem; color: var(--text-secondary); margin-bottom: 10px; }
.step-content .form-control { background-color: var(--nm-bg); box-shadow: var(--nm-in); }

/* ---- Notifications ---- */
.notification-item { display: flex; gap: 15px; padding: 16px; background-color: var(--nm-bg); border: none; border-radius: 18px; margin-bottom: 12px; box-shadow: var(--nm-out); position: relative; }
.notification-item-img { width: 60px; height: 60px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.notification-item-content { flex-grow: 1; }
.notification-item-title { font-weight: 600; font-size: 1rem; color: var(--text-primary); margin-bottom: 4px; }
.notification-item-message { font-size: .9rem; color: var(--text-secondary); line-height: 1.5; }
.notification-item-time { font-size: .75rem; color: var(--text-secondary); opacity: .8; margin-top: 8px; }
.unread-indicator { position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; background-color: var(--accent-color); border-radius: 50%; box-shadow: 0 0 0 3px var(--nm-bg); }

/* ---- Leaderboard + center nav ---- */
.bottom-nav { align-items: end; }
.nav-item.nav-item-center {
  position: relative; transform: translateY(-14px);
  background: var(--accent-gradient); color: #1e2027; border-radius: 50%;
  width: 60px; height: 60px; border: 3px solid var(--nm-bg);
  box-shadow: 6px 6px 14px var(--nm-dark), -6px -6px 14px var(--nm-light);
  flex-grow: 0; flex-shrink: 0;
}
.nav-item.nav-item-center.active { box-shadow: inset 4px 4px 8px rgba(0,0,0,.25), inset -4px -4px 8px rgba(255,255,255,.25); }
.nav-item.nav-item-center i { font-size: 1.8rem; margin-bottom: 0; line-height: 1; }
.nav-item.nav-item-center span { display: none; }
.leaderboard-item { display: flex; align-items: center; padding: 12px; background-color: var(--nm-bg); border-radius: 16px; margin-bottom: 12px; box-shadow: var(--nm-out); border: none; transition: box-shadow .2s; }
.leaderboard-item:first-child { box-shadow: var(--nm-out); border: 1px solid var(--accent-color); }
.leaderboard-rank { font-size: 1.1rem; font-weight: 700; color: var(--text-secondary); width: 35px; text-align: center; flex-shrink: 0; }
.leaderboard-item:first-child .leaderboard-rank { color: var(--accent-color); font-size: 1.3rem; }
.leaderboard-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; margin-left: 10px; margin-right: 15px; box-shadow: var(--nm-out-sm); }
.leaderboard-user-info { flex-grow: 1; overflow: hidden; }
.leaderboard-name { font-weight: 600; font-size: .95rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaderboard-earnings { font-weight: 600; font-size: 1rem; color: var(--accent-color); text-align: right; padding-left: 10px; }

/* ---- Chat ---- */
#chatMessagesEl { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column-reverse; padding: 12px; }
.chat-bubble { padding: 10px 16px; border-radius: 18px; margin-top: 10px; max-width: 80%; word-wrap: break-word; cursor: pointer; box-shadow: var(--nm-out-sm); }
.chat-bubble .sender-name { font-size: .75rem; font-weight: 600; margin-bottom: 2px; display: block; }
.chat-bubble .msg-time { font-size: .7rem; opacity: .7; display: block; margin-top: 4px; text-align: right; }
.my-message { background: var(--nm-bg); color: var(--text-primary); align-self: flex-end; border-bottom-right-radius: 4px; }
.other-message { background: var(--nm-bg); color: var(--text-primary); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: var(--nm-in-sm); }
.other-message .sender-name { color: var(--accent-color); }
.reply-quote-block { background-color: var(--nm-dark); padding: 8px; border-left: 3px solid var(--accent-color); border-radius: 4px; margin-bottom: 6px; font-size: .85rem; }
.reply-quote-block .sender-name { font-weight: 700; color: var(--accent-color); display: block; font-size: .8rem; }
.reply-quote-block p { margin: 0; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatReplyContextEl { background-color: var(--nm-bg); padding: 10px 15px; border-top: 1px solid var(--nm-dark); box-shadow: var(--nm-in); }
.reply-context-header { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--text-secondary); }
.reply-context-header strong { color: var(--accent-color); }
#chatReplyContextEl p { font-size: .9rem; margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
#cancelReplyBtn { background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; line-height: 1; padding: 0 5px; box-shadow: none; }

/* ---- Splash ---- */
#splash-screen { position: fixed; inset: 0; background-color: var(--nm-bg); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 1; transition: opacity .5s ease-out, transform .5s ease-out; }
#splash-screen.hidden { opacity: 0; transform: scale(1.2); pointer-events: none; }
.splash-logo-container { text-align: center; }
.splash-logo { width: 120px; height: 120px; animation: pulse 2s infinite ease-in-out; }
.splash-title { font-size: 3rem; font-weight: 700; color: var(--text-primary); margin-top: 10px; animation: fadeInText 2s ease-in-out; }
@keyframes pulse { 0% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(248,192,21,.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(248,192,21,0); } 100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(248,192,21,0); } }
@keyframes fadeInText { from { opacity: 0; } to { opacity: 1; } }

/* ---- Announcement / uploads / slots ---- */
#announcementBarEl { background-color: var(--nm-bg); border: none; border-radius: 16px; padding: 14px 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 15px; box-shadow: var(--nm-in); }
#announcementBarEl .icon { font-size: 1.5rem; color: var(--accent-color); }
#announcementBarEl .text { font-size: .85rem; color: var(--text-secondary); flex-grow: 1; }
#announcementBarEl .text a { color: var(--accent-color); text-decoration: underline; font-weight: 600; }
.file-upload-wrapper { position: relative; background-color: var(--nm-bg); border: 2px dashed var(--nm-dark); border-radius: 16px; padding: 20px; text-align: center; cursor: pointer; transition: border-color .2s; box-shadow: var(--nm-in); }
.file-upload-wrapper:hover { border-color: var(--accent-color); }
.file-upload-wrapper input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-upload-wrapper .file-upload-text { color: var(--text-secondary); }
.file-upload-wrapper .file-upload-text i { font-size: 2rem; display: block; margin-bottom: 10px; }
#file-upload-name { font-size: .8rem; margin-top: 10px; color: var(--text-primary); font-style: italic; }
.withdraw-method-option { background-color: var(--nm-bg); border: 2px solid transparent; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; text-align: center; box-shadow: var(--nm-out-sm); }
.withdraw-method-option:hover { border-color: var(--accent-color); }
.withdraw-method-option img { height: 40px; margin-bottom: 10px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 10px; max-height: 50vh; overflow-y: auto; padding: 5px; }
.slot-btn { background-color: var(--nm-bg); border: none; color: var(--text-primary); border-radius: 14px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; transition: all .2s; box-shadow: var(--nm-out-sm); }
.slot-btn:hover:not(:disabled) { color: var(--accent-color); }
.slot-btn:disabled { background: var(--nm-bg); color: var(--danger-color); opacity: .7; cursor: not-allowed; box-shadow: var(--nm-in-sm); }
.slot-btn.selected { color: #1e2027; background: var(--accent-gradient); box-shadow: var(--nm-in-sm); transform: scale(1.05); }

/* ---- Contest status nav ---- */
.contest-status-nav { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.contest-status-btn { flex: 1; background-color: var(--nm-bg); border: none; border-radius: 16px; padding: 14px 5px; color: var(--text-primary); text-align: center; text-decoration: none; transition: all .2s; box-shadow: var(--nm-out-sm); }
.contest-status-btn:hover { transform: translateY(-3px); color: var(--accent-color); box-shadow: 7px 7px 16px var(--nm-dark), -7px -7px 16px var(--nm-light); }
.contest-status-btn.active { box-shadow: var(--nm-in-sm); color: var(--accent-color); }
.contest-status-btn i { font-size: 1.5rem; display: block; margin-bottom: 5px; color: var(--accent-color); }
.contest-status-btn span { font-weight: 500; font-size: .8rem; }

/* ===================== SUCCESS ANIMATION (Right Tick) ===================== */
#successAnimation {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(18,20,26,0.55);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
#successAnimation.show { opacity: 1; pointer-events: auto; }
.success-circle {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--nm-bg); box-shadow: var(--nm-out);
  display: flex; align-items: center; justify-content: center;
  transform: scale(0);
}
#successAnimation.show .success-circle { animation: successPop .45s cubic-bezier(.18,.89,.32,1.28) forwards; }
.success-circle svg { width: 66px; height: 66px; }
.success-check {
  stroke: var(--success-color); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  fill: none; stroke-dasharray: 60; stroke-dashoffset: 60;
}
#successAnimation.show .success-check { animation: successDraw .5s ease-out .35s forwards; }
.success-text { margin-top: 22px; color: #ffffff; font-weight: 600; font-size: 1rem; text-align: center; padding: 0 30px; letter-spacing: .3px; }
@keyframes successPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes successDraw { to { stroke-dashoffset: 0; } }


/* ===== Auth Screen + Professional Neomorphic Loader ===== */
body.auth-screen { padding-top: 0 !important; padding-bottom: 0 !important; }
body.auth-screen .app-header,
body.auth-screen .bottom-nav { display: none !important; }
body.auth-screen .main-content { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
body.auth-screen #login-section { width: 100%; margin: 0; }

#globalLoaderEl {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(232,235,242,.84);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
}
.nm-loader-card {
  width: 164px; min-height: 154px; padding: 24px 20px; border-radius: 28px;
  background: var(--nm-bg); box-shadow: var(--nm-out);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.nm-loader-ring {
  width: 62px; height: 62px; padding: 8px; border-radius: 50%;
  background: var(--nm-bg); box-shadow: var(--nm-in);
  position: relative;
}
.nm-loader-ring::before {
  content: ''; position: absolute; inset: 8px; border-radius: 50%;
  border: 5px solid transparent; border-top-color: var(--accent-color); border-right-color: var(--primary-button-bg);
  filter: drop-shadow(0 2px 3px rgba(59,130,246,.25));
  animation: nmLoaderSpin .85s linear infinite;
}
.nm-loader-core {
  position: absolute; inset: 21px; border-radius: 50%; background: var(--accent-gradient);
  box-shadow: 2px 2px 5px var(--nm-dark), -2px -2px 5px var(--nm-light);
  animation: nmLoaderPulse 1.25s ease-in-out infinite;
}
.nm-loader-text { color: var(--text-secondary); font-size: .8rem; font-weight: 600; letter-spacing: .8px; }
.nm-loader-dots { display: inline-flex; gap: 4px; margin-left: 3px; }
.nm-loader-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-color); animation: nmDot 1.1s ease-in-out infinite; }
.nm-loader-dots i:nth-child(2){animation-delay:.15s}.nm-loader-dots i:nth-child(3){animation-delay:.3s}
@keyframes nmLoaderSpin { to { transform: rotate(360deg); } }
@keyframes nmLoaderPulse { 0%,100% { transform: scale(.82); opacity:.65; } 50% { transform: scale(1); opacity:1; } }
@keyframes nmDot { 0%,60%,100% { transform:translateY(0); opacity:.35; } 30% { transform:translateY(-5px); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .nm-loader-ring::before,.nm-loader-core,.nm-loader-dots i { animation-duration: 1.8s; } }


/* ===== Native-style UI guards + upgraded neomorphic bottom navigation ===== */
html, body { overscroll-behavior: none !important; -webkit-touch-callout: none; }
body, body * { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select { -webkit-user-select: text; user-select: text; }
img, a { -webkit-user-drag: none; }

.bottom-nav {
  height: 82px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  align-items: center; justify-content: space-around; gap: 3px;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -7px 18px var(--nm-dark), 0 3px 12px var(--nm-light);
}
.bottom-nav .nav-item {
  height: 68px; min-width: 0; padding: 5px 2px; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; transform: none; border-radius: 17px;
}
.bottom-nav .nav-item i {
  width: 42px; height: 42px; margin: 0; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--text-secondary); background: var(--nm-bg);
  box-shadow: var(--nm-out-sm); transition: .2s ease;
}
.bottom-nav .nav-item span { display:block; font-size:.63rem; line-height:1; font-weight:600; white-space:nowrap; color:var(--text-secondary); }
.bottom-nav .nav-item.active { color: var(--accent-color); }
.bottom-nav .nav-item.active i { color: var(--accent-color); box-shadow: var(--nm-in-sm); transform: translateY(1px); filter:none; }
.bottom-nav .nav-item.active span { color: var(--accent-color); }
.bottom-nav .nav-item.nav-item-center { width:auto; height:68px; flex:1; transform:none; border:0; background:transparent; box-shadow:none; border-radius:17px; }
.bottom-nav .nav-item.nav-item-center i { width:48px; height:48px; border-radius:50%; color:#252832; background:var(--accent-gradient); box-shadow:5px 5px 11px var(--nm-dark),-5px -5px 11px var(--nm-light); font-size:1.35rem; }
.bottom-nav .nav-item.nav-item-center.active i { box-shadow:inset 4px 4px 8px rgba(120,82,0,.3),inset -4px -4px 8px rgba(255,255,255,.35); }
.bottom-nav .nav-item.nav-item-center span { display:block; }
body:not(.auth-screen) { padding-bottom: 94px; }
@media(max-width:360px){.bottom-nav{padding-left:3px;padding-right:3px}.bottom-nav .nav-item i{width:38px;height:38px}.bottom-nav .nav-item span{font-size:.57rem}}

.social-link-item { display:flex; align-items:center; gap:14px; padding:14px 15px; margin-bottom:13px; border-radius:17px; background:var(--nm-bg); box-shadow:var(--nm-out-sm); color:var(--text-primary); }
.social-link-item:active { box-shadow:var(--nm-in-sm); }
.social-link-icon { width:42px; height:42px; flex:0 0 42px; border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:var(--nm-in-sm); font-size:1.25rem; color:var(--accent-color); }
.social-link-info { flex:1; min-width:0; }.social-link-info strong{display:block;font-size:.92rem}.social-link-info small{display:block;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.social-link-item>i:last-child{color:var(--text-secondary)}


/* ===== Scroll fix, neomorphic header, drawer and feature pages ===== */
html, body { height:auto!important; min-height:100%; overflow-x:hidden!important; overflow-y:auto!important; touch-action:pan-y!important; overscroll-behavior-x:none!important; overscroll-behavior-y:contain!important; -webkit-overflow-scrolling:touch; }
.main-content,.section { touch-action:pan-y!important; }
.app-header { height:66px; padding:0 14px; background:var(--nm-bg); border-radius:0 0 22px 22px; box-shadow:0 7px 17px var(--nm-dark),0 -3px 12px var(--nm-light); }
.header-menu-button { width:43px;height:43px;border:0;border-radius:14px;background:var(--nm-bg);color:var(--text-primary);box-shadow:var(--nm-out-sm);font-size:1.35rem;display:flex;align-items:center;justify-content:center; }
.header-menu-button:active { box-shadow:var(--nm-in-sm); }
.header-title { font-size:1rem;font-weight:700; }
.app-drawer { background:var(--nm-bg)!important;color:var(--text-primary);border:0!important;box-shadow:var(--nm-out);width:min(84vw,330px)!important; }
.drawer-brand { padding:18px;border-radius:20px;background:var(--nm-bg);box-shadow:var(--nm-in); }
.drawer-link { width:100%;border:0;background:var(--nm-bg);color:var(--text-primary);padding:14px 15px;margin-bottom:13px;border-radius:16px;display:flex;align-items:center;gap:13px;text-align:left;box-shadow:var(--nm-out-sm);font-weight:600; }
.drawer-link:active { box-shadow:var(--nm-in-sm); }.drawer-link i:first-child{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:var(--nm-in-sm);color:var(--accent-color);font-size:1.1rem}.drawer-link .bi-chevron-right{margin-left:auto;color:var(--text-secondary)}
.feature-hero { border-radius:24px;padding:23px;background:var(--nm-bg);box-shadow:var(--nm-out);margin-bottom:20px;position:relative;overflow:hidden; }.feature-hero::after{content:'';position:absolute;width:120px;height:120px;border-radius:50%;right:-45px;top:-45px;background:rgba(248,192,21,.12)}
.stats-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-bottom:20px; }.stat-card-neo{padding:16px;border-radius:18px;background:var(--nm-bg);box-shadow:var(--nm-out-sm);text-align:center}.stat-card-neo strong{display:block;font-size:1.35rem;color:var(--accent-color)}.stat-card-neo span{font-size:.72rem;color:var(--text-secondary)}
.referral-box { padding:16px;border-radius:18px;background:var(--nm-bg);box-shadow:var(--nm-in);word-break:break-all; }
.transaction-full-item { padding:15px;border-radius:17px;background:var(--nm-bg);box-shadow:var(--nm-out-sm);margin-bottom:13px;display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer}.transaction-full-item:active{box-shadow:var(--nm-in-sm)}
.plan-card { padding:20px;border-radius:22px;background:var(--nm-bg);box-shadow:var(--nm-out);margin-bottom:18px;border:2px solid transparent}.plan-card.featured{border-color:var(--accent-color)}.plan-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;background:var(--accent-gradient);color:#252832;font-size:.72rem;font-weight:700}.feature-list{list-style:none;padding:0;margin:16px 0}.feature-list li{padding:7px 0;color:var(--text-secondary);font-size:.85rem}.feature-list i{color:var(--success-color);margin-right:8px}
.verified-badge { margin-left:6px;font-size:.95rem;vertical-align:middle}.verified-v{color:#f59e0b}.verified-meta{color:#2585ff}


/* ===== Definitive scroll unlock + full feature pages ===== */
html { overflow-y:scroll!important; height:auto!important; }
body { position:static!important; height:auto!important; min-height:100vh!important; overflow-y:visible!important; touch-action:auto!important; }
body:not(.auth-screen) .main-content { display:block!important; height:auto!important; min-height:100vh!important; overflow:visible!important; touch-action:pan-y!important; }
body.feature-page { padding-top:68px!important; padding-bottom:20px!important; overflow-y:auto!important; }
body.feature-page .app-header, body.feature-page .bottom-nav { display:none!important; }
.feature-page-back { display:none; position:fixed; top:14px; left:14px; z-index:1050; width:44px;height:44px;border:0;border-radius:14px;background:var(--nm-bg);color:var(--text-primary);box-shadow:var(--nm-out-sm);font-size:1.25rem;align-items:center;justify-content:center; }
body.feature-page .feature-page-back { display:flex; }
.bank-method-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0; }.bank-method-option{border:0;border-radius:17px;background:var(--nm-bg);box-shadow:var(--nm-out-sm);padding:15px 6px;color:var(--text-primary);font-size:.72rem;font-weight:600;text-align:center}.bank-method-option i{display:block;font-size:1.45rem;color:var(--accent-color);margin-bottom:6px}.bank-method-option.selected{box-shadow:var(--nm-in-sm);color:var(--accent-color)}
.bank-saved-card{padding:18px;border-radius:20px;background:var(--nm-bg);box-shadow:var(--nm-out);}.bank-detail-row{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid var(--nm-dark)}.bank-detail-row:last-child{border-bottom:0}.bank-detail-row span{color:var(--text-secondary);font-size:.8rem}.bank-detail-row strong{text-align:right;word-break:break-all}
.ff-v-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:6px;margin-left:5px;background:linear-gradient(145deg,#ffd54f,#f59e0b);color:#2b2110;font-size:.66rem;font-weight:900;box-shadow:2px 2px 5px rgba(120,90,0,.28);vertical-align:middle}


/* Final interaction policy: full-page scroll and browser refresh enabled; text selection disabled */
html,body{overflow-y:auto!important;overscroll-behavior:auto!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important}body,body *{-webkit-user-select:none!important;user-select:none!important}input,textarea,select{-webkit-user-select:text!important;user-select:text!important}


.pro-member-card{display:none;margin-top:8px;padding:9px 12px;border-radius:14px;background:linear-gradient(145deg,#dbeafe,#bfdbfe);box-shadow:4px 4px 9px var(--nm-dark),-4px -4px 9px var(--nm-light);color:#1d4ed8;font-size:.72rem;font-weight:800;letter-spacing:1px;align-items:center;gap:8px;width:max-content;max-width:100%}.pro-member-card i{font-size:1rem}.pro-member-card small{font-weight:600;letter-spacing:0;color:#4b6ea9}
.invoice-head{padding:20px;border-radius:20px;background:var(--nm-bg);box-shadow:var(--nm-in);text-align:center;margin-bottom:18px}.invoice-amount{font-size:2rem;font-weight:800}.invoice-status{display:inline-block;padding:5px 12px;border-radius:20px;font-size:.72rem;font-weight:700}.invoice-row{display:flex;justify-content:space-between;gap:16px;padding:11px 2px;border-bottom:1px dashed var(--nm-dark)}.invoice-row span{color:var(--text-secondary);font-size:.8rem}.invoice-row strong{text-align:right;word-break:break-word;font-size:.84rem}


/* Promotion slider: exactly one banner at a time, no adjacent-image peek */
#promotionSliderEl{overflow:hidden!important;padding:0!important}#promotionSliderEl .swiper-wrapper{width:100%!important}#promotionSliderEl .swiper-slide{width:100%!important;min-width:100%!important;max-width:100%!important;flex:0 0 100%!important;margin-right:0!important;overflow:hidden!important}#promotionSliderEl .swiper-slide img{width:100%!important;border-radius:20px!important}


.countdown-watch-wrap{text-align:center;margin-bottom:20px}.countdown-watch{width:150px;height:150px;margin:auto;border-radius:50%;background:var(--nm-bg);box-shadow:var(--nm-out);position:relative;display:flex;align-items:center;justify-content:center}.countdown-watch::before{content:'';position:absolute;inset:12px;border-radius:50%;box-shadow:var(--nm-in)}.countdown-hand{position:absolute;width:3px;height:48px;background:var(--accent-color);bottom:75px;left:calc(50% - 1.5px);transform-origin:50% 100%;border-radius:3px;animation:watchSweep 4s linear infinite}.countdown-hand::after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:var(--primary-button-bg);left:-4.5px;bottom:-6px}.countdown-watch-text{position:relative;z-index:2;margin-top:25px;font-size:1rem;font-weight:800}.countdown-watch-label{position:relative;z-index:2;font-size:.62rem;color:var(--text-secondary)}@keyframes watchSweep{to{transform:rotate(360deg)}}


/* User theme picker */
.theme-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.theme-choice{border:2px solid transparent;border-radius:18px;padding:16px 10px;background:var(--nm-bg);box-shadow:var(--nm-out-sm);color:var(--text-primary);text-align:center;font-weight:700}.theme-choice:active,.theme-choice.active{box-shadow:var(--nm-in-sm);border-color:var(--accent-color)}.theme-preview{height:52px;border-radius:14px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:7px}.theme-preview i{width:22px;height:22px;border-radius:7px;box-shadow:3px 3px 6px rgba(0,0,0,.22),-2px -2px 5px rgba(255,255,255,.28)}