/* Stanley Frenzy96 official assets wired 2026-05-21 */
/* ─── Header ─── */
.top-nav {
background: linear-gradient(180deg, #031e28 0%, #032530 100%) !important;
border-bottom: 1px solid rgba(12, 192, 255, 0.18) !important;
}
/* Hide language switcher (frenzy96 = AU EN-only) */
.lang-dd, .lang-dd-sum, .lang-dd-menu { display: none !important; }
/* Logo sizing (red-box matched ~150px wide) */
.top-nav .brand-wrap {
flex: 0 0 auto !important;
flex-shrink: 0 !important;
margin-right: auto !important;
}
.top-nav .brand-logo {
height: 36px !important;
width: auto !important;
min-width: 150px !important;
max-width: 180px !important;
object-fit: contain !important;
}
@media (min-width: 640px) {
.top-nav .brand-logo { height: 44px !important; min-width: 190px !important; max-width: 230px !important; }
}
/* LOGIN / REGISTER buttons — use Stanley PNG instead of CSS-painted */
.topnav-btn-login,
.topnav-btn-register {
background-color: transparent !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
color: transparent !important;
font-size: 0 !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
width: 92px !important;
height: 38px !important;
cursor: pointer !important;
transition: transform 0.12s ease, filter 0.12s ease !important;
box-shadow: none !important;
clip-path: none !important;
}
.topnav-btn-login::before,
.topnav-btn-register::before { display: none !important; content: none !important; }
.topnav-btn-login { background-image: url("/assets/img/brand/stanley/frenzy96_misc_loginbtn.png?v=20260521") !important; }
.topnav-btn-register { background-image: url("/assets/img/brand/stanley/frenzy96_misc_registerbtn.png?v=20260521") !important; }
.topnav-btn-login:hover, .topnav-btn-register:hover { filter: brightness(1.12) drop-shadow(0 0 6px rgba(12,192,255,0.5)) !important; }
.topnav-btn-login:active, .topnav-btn-register:active { transform: scale(0.96) !important; }
@media (min-width: 640px) {
.topnav-btn-login, .topnav-btn-register { width: 110px !important; height: 44px !important; }
}
/* Tighten gap */
.top-nav .flex.items-center.gap-2 { gap: 6px !important; }
#topnav-auth-out { gap: 6px !important; }
/* ─── APK Top Banner — use Stanley PNG ─── */
#apk-banner.apk-banner {
background-image: url("/assets/img/brand/stanley/frenzy96_misc_appdownload.jpg?v=20260521") !important;
background-size: 100% auto !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-color: #0a1828 !important;
padding: 0 !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 1081 / 130 !important;
position: relative !important;
overflow: hidden !important;
display: block !important;
}
#apk-banner .apk-icon,
#apk-banner .apk-title,
#apk-banner .apk-sub,
#apk-banner .apk-btn { display: none !important; }
#apk-banner .apk-close {
position: absolute !important;
top: 4px !important; right: 8px !important;
background: rgba(0,0,0,0.4) !important;
border-radius: 50% !important;
width: 24px !important; height: 24px !important;
color: #fff !important;
font-size: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: none !important;
cursor: pointer !important;
z-index: 2 !important;
}
/* Make full banner clickable as DOWNLOAD link */
#apk-banner::after {
content: "";
position: absolute;
inset: 0;
cursor: pointer;
z-index: 1;
}
/* ─── Hero carousel — let image fill, hide overlay text ─── */
.hero .hero-slide-text,
.hero .hero-side-logo,
.hero .hero-slide .hero-cta-wrap,
.hero .hero-slide .hero-eyebrow,
.hero .hero-slide .hero-title,
.hero .hero-slide .hero-subtxt { display: none !important; }
.hero .hero-slide {
background-size: cover !important;
background-position: center !important;
}
/* Force-hide leaderboard widget (Mz delete request 2026-05-21) */
#bs-leaderboard, #bs-leaderboard-rows { display: none !important; }
/* Hide live winner popup (Malay menang text) */
#wt-pop, .wt-card, .wt-pop, [class*="bs-winner-toast"] { display: none !important; }
/* Hide hero PLAY NOW button per Mz 2026-05-21 — carousel images already contain CTAs */
.hero .hero-cta, #btn-hero-cta, .hero-cta-pulse { display: none !important; }
/* Hide floating register CTA (DAFTAR FREE A$30) per Mz 2026-05-21 */
#fab-cta-register, .fab-floating-cta { display: none !important; }
/* Brighten hero carousel slides per Mz 2026-05-21 (too dark) */
.hero .hero-slide,
.hero-wrap .hero-slide,
#hero-carousel .hero-slide {
filter: none !important;
}
.hero .hero-slide::before, .hero .hero-slide::after { display: none !important; }
/* Stanley Game Type buttons — bulletproof override 2026-05-21 */
#sec-popular-games .cat-row.stanley-game-type-row {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 6px !important;
padding: 8px 10px 12px !important;
margin: 0 !important;
overflow: visible !important;
flex-wrap: wrap !important;
}
#sec-popular-games .cat-row.stanley-game-type-row::-webkit-scrollbar { display: none; }
#sec-popular-games .cat-btn.stanley-game-btn,
#sec-popular-games .cat-btn.stanley-game-btn.active {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
gap: 0 !important;
background: linear-gradient(160deg, #0a3a52 0%, #042a3a 100%) !important;
border: 2px solid rgba(12, 192, 255, 0.35) !important;
border-radius: 16px !important;
overflow: hidden !important;
aspect-ratio: 1 / 1 !important;
width: 100% !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
max-height: none !important;
font-size: 0 !important;
color: transparent !important;
letter-spacing: 0 !important;
transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.05) !important;
position: relative !important;
cursor: pointer !important;
}
#sec-popular-games .cat-btn.stanley-game-btn::before,
#sec-popular-games .cat-btn.stanley-game-btn::after {
content: none !important;
display: none !important;
}
#sec-popular-games .cat-btn.stanley-game-btn img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
filter: brightness(1.08) drop-shadow(0 4px 12px rgba(0,0,0,0.5)) !important;
margin: 0 !important;
padding: 0 !important;
}
#sec-popular-games .cat-btn.stanley-game-btn:hover {
transform: translateY(-3px) !important;
border-color: rgba(12, 192, 255, 0.75) !important;
box-shadow: 0 8px 22px rgba(12, 192, 255, 0.35) !important;
}
#sec-popular-games .cat-btn.stanley-game-btn:hover img {
filter: brightness(1.15) saturate(1.1) drop-shadow(0 6px 14px rgba(12,192,255,0.4)) !important;
}
#sec-popular-games .cat-btn.stanley-game-btn.active {
border-color: #fbbf24 !important;
box-shadow: 0 6px 20px rgba(251,191,36,0.4) !important;
}
#sec-popular-games .cat-btn.stanley-game-btn.active img {
filter: brightness(1.12) saturate(1.15) drop-shadow(0 4px 12px rgba(251,191,36,0.5)) !important;
}
#sec-popular-games .cat-btn.stanley-game-btn:active { transform: scale(0.97) !important; }
@media (min-width: 640px) {
#sec-popular-games .cat-row.stanley-game-type-row {
grid-template-columns: repeat(4, 1fr) !important;
}
#sec-popular-games .cat-btn.stanley-game-btn { aspect-ratio: 1 / 1 !important; }
}
/* Block theme-d.js icon injection on our Stanley buttons */
#sec-popular-games .cat-btn.stanley-game-btn[data-d-ico]::before,
#sec-popular-games .cat-btn.stanley-game-btn[data-d-ico]::after { display: none !important; content: none !important; }
/* Announcement welcome popup (modal-news) — backend-controlled (enabled toggle) 2026-05-24.
Hidden by default; shown only when JS adds .show (after /api/announcements/active enabled=true). */
#modal-news.modal-backdrop { display: none !important; }
#modal-news.modal-backdrop.show { display: flex !important; }
/* ─── Unify horizontal alignment across all sections 2026-05-21 ─── */
/* Match Game Type row to .section-title / games-grid (no extra padding) */
#sec-popular-games .cat-row.stanley-game-type-row {
padding: 8px 0 12px !important;
margin: 0 !important;
}
/* Ensure all section children flush-left within bs-container */
.bs-container .section,
.bs-container > .hero-wrap,
.bs-container > .footer-copy {
padding-left: 14px !important;
padding-right: 14px !important;
}
.bs-container .section .section-title,
.bs-container .section .games-grid,
.bs-container .section .vip-strip,
.bs-container .section .feat-grid,
.bs-container .section .trust-row,
.bs-container .section .pay-grid,
.bs-container .section .pay-cat-head,
.bs-container .section .faq-item,
.bs-container .section #testimonials-rail {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ─── Stanley mockup: TOP PICKS + OUR GAMES sections 2026-05-21 ─── */
.section-title.section-title-row {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
}
.section-title.section-title-row .see-all-link {
margin-left: auto !important;
font-size: 11px !important;
color: var(--gold) !important;
text-decoration: none !important;
font-weight: 600 !important;
letter-spacing: 0.4px !important;
}
.section-title.section-title-row .see-all-link:hover {
filter: brightness(1.2);
}
.top-picks-scroll {
display: flex !important;
gap: 10px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
padding: 4px 0 12px !important;
margin: 0 !important;
}
.top-picks-scroll::-webkit-scrollbar { display: none; }
.top-picks-scroll .game-tile {
flex: 0 0 calc((100% - 30px) / 4) !important;
scroll-snap-align: start !important;
min-width: 0 !important;
aspect-ratio: 3 / 4 !important;
height: auto !important;
margin: 0 !important;
}
@media (min-width: 640px) {
.top-picks-scroll .game-tile {
flex: 0 0 140px !important;
}
}
/* Trust badges: fit 4 in one row, no horizontal scrollbar (2026-05-22 Mz) */
.trust-row{grid-template-columns:repeat(4,1fr)!important;overflow-x:hidden!important;gap:6px!important;}
.trust-row .trust-badge{min-width:0!important;padding:12px 4px!important;}
.trust-row .trust-lbl{white-space:normal!important;font-size:10px!important;line-height:1.2!important;word-break:break-word;}
/* Stanley 2026-05-23: chat nav icon — FULL parity with sibling nav items (no FAB, label in normal flow, blue active state) */
/* legacy .bnav-center wrapper removed from HTML; keep these in case of cache */
.bottom-nav .bnav-item[data-nav="live"] .bnav-center {
width: auto !important; height: auto !important; display: contents !important;
border-radius: 0 !important; background: none !important; border: none !important;
transform: none !important; box-shadow: none !important; animation: none !important;
color: inherit !important; margin-top: 0 !important; z-index: auto !important;
}
.bottom-nav .bnav-item[data-nav="live"] .bnav-center::after { display: none !important; }
/* label back to normal flow like the other 4 items (kill old absolute/9px FAB-label) */
.bottom-nav .bnav-item[data-nav="live"] > span {
position: static !important; bottom: auto !important; left: auto !important;
transform: none !important; font-size: inherit !important; white-space: nowrap;
}
/* active state matches siblings: blue label + blue top stripe (was gold + hidden) */
.bottom-nav .bnav-item[data-nav="live"].active { color: #0CC0FF !important; }
.bottom-nav .bnav-item[data-nav="live"].active > span { color: #0CC0FF !important; }
.bottom-nav .bnav-item[data-nav="live"].active::before {
content: "" !important; display: block !important; position: absolute !important;
top: 0 !important; left: 50% !important; transform: translateX(-50%) !important;
width: 28px !important; height: 3px !important; border-radius: 0 0 3px 3px !important;
background: linear-gradient(90deg, #0891b2, #0CC0FF, #0891b2) !important;
box-shadow: 0 0 10px rgba(12,192,255,0.6) !important;
}
/* ─────────────────────────────────────────────────────────
Hero carousel mobile fix (2026-05-24)
Bug: banners are landscape 1000×600 (aspect 1.667). On mobile the
P4 rule forced .hero min-height:160px, so object-fit:cover squashed
the wide banner into a short ~190px sliver — shark/text cropped off
and dimmed (opacity .55 + dark overlay) → looked like hero was gone.
Fix: on mobile, size the hero box to the banner's own aspect ratio
so the FULL landscape image shows uncropped + undistorted.
───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.hero,
#hero-carousel {
aspect-ratio: 1000 / 600 !important; /* match banner art */
min-height: 0 !important; /* kill P4 160px squash */
height: auto !important;
}
/* slides fill the aspect-ratio box; image shows full, no crop */
.hero .hero-slide,
#hero-carousel .hero-slide { padding: 0 !important; }
.hero .hero-bg-art,
#hero-carousel .hero-bg-art {
object-fit: cover !important; /* fills box exactly at same AR = no crop */
opacity: 1 !important; /* full brightness — banner already designed as art */
}
/* drop the dark scrim on mobile so the banner reads clearly */
.hero .hero-slide::after,
#hero-carousel .hero-slide::after { display: none !important; }
}
/* hero-desktop-fullimg-2026-05-25: desktop hero showed only a 21/9 sliver of the 1000x600 banner,
so object-fit:cover cropped the bottom text. Match the box to the banner
aspect so the FULL art shows on desktop/tablet too (mobile already fixed). */
@media (min-width: 641px) {
#hero-carousel.hero,
#hero-carousel,
.hero-wrap > .hero {
aspect-ratio: 1000 / 600 !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
}
#hero-carousel .hero-slide { padding: 0 !important; }
#hero-carousel .hero-bg-art {
width: 100% !important; height: 100% !important;
object-fit: cover !important; /* same AR as box = full image, no crop */
object-position: center !important;
opacity: 1 !important;
}
#hero-carousel .hero-slide::after { display: none !important; } /* drop dark scrim */
}
/* auth-modal-solid-2026-05-25: login/register modal was transparent (mobile-phase1 set
#modal-auth .auth-card background:transparent). Make it a solid dark-teal card. */
#modal-auth.modal-backdrop {
background: rgba(2,8,14,0.90) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
#modal-auth .auth-card {
background: linear-gradient(180deg,#0f2230 0%,#0a1a26 58%,#08131c 100%) !important;
border: 1px solid rgba(251,191,36,0.22) !important;
box-shadow: 0 30px 80px rgba(0,0,0,0.78), 0 0 0 1px rgba(12,192,255,0.06) !important;
border-radius: 18px !important;
padding: 18px 0 !important;
}
#modal-auth .bs-input {
background: rgba(255,255,255,0.055) !important;
border: 1px solid rgba(255,255,255,0.16) !important;
color: #eaf2f5 !important;
}
#modal-auth .bs-input::placeholder { color: rgba(234,242,245,0.45) !important; }
#modal-auth .bs-input:focus {
border-color: #fbbf24 !important;
background: rgba(255,255,255,0.08) !important;
box-shadow: 0 0 0 3px rgba(251,191,36,0.15) !important;
}
/* tab bar contrast on the solid card */
#modal-auth .auth-tab { color: rgba(255,255,255,0.55) !important; font-weight: 800 !important; text-decoration: none !important; }
#modal-auth .auth-tab.active { color: #fbbf24 !important; }
/* stanley-feedback2-2026-05-25 */
/* 1. header logo — remove yellow glow */
img.brand-logo, .top-nav img.brand-logo { filter: none !important; }
/* 3. game type buttons — remove yellow glow + yellow border + icon glow */
#sec-popular-games .cat-btn.stanley-game-btn,
#sec-popular-games .cat-btn.stanley-game-btn.active {
border: 1.5px solid rgba(12,192,255,0.28) !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
#sec-popular-games .cat-btn.stanley-game-btn img,
#sec-popular-games .cat-btn.stanley-game-btn.active img { filter: none !important; }
/* 3 columns (sportsbook removed) + keep icons off the phone edges (no edge fade) */
#sec-popular-games .cat-row.stanley-game-type-row,
#sec-popular-games .cat-row.stanley-game-type-row {
grid-template-columns: repeat(3, 1fr) !important;
padding-left: 16px !important; padding-right: 16px !important; gap: 10px !important;
}
@media (min-width: 640px) {
#sec-popular-games .cat-row.stanley-game-type-row { grid-template-columns: repeat(3, 1fr) !important; }
}
/* 4. trust strip recolor (Stanley spec) */
.trust-badge { background: #272E30 !important; border: 1px solid #055D6B !important;
background-image: none !important; }
.trust-ico { color: #0CC0FF !important; filter: none !important; }
.trust-ico path { stroke: #0CC0FF !important; }
.trust-ico path[fill="currentColor"] { fill: #0CC0FF !important; }
.trust-lbl { color: #FFFEFC !important; }
/* transparent-mix-2026-05-26 (revert marquee, keep logo + bnav transparent) */
img.brand-logo,
img.bnav-ico {
background: transparent !important;
}
/* === Mobile Auth Modal Polish 2026-05-26 === */
@media (max-width: 640px) {
/* Brand header: ensure logo+text centered, not floating right */
#modal-auth .auth-card > div.f96a-brand {
padding: 4px 0 18px 0 !important;
}
/* Tabs: equal width pill toggle with golden active */
#modal-auth .auth-tabs {
display: flex !important;
background: rgba(255,255,255,0.04) !important;
border-radius: 12px !important;
padding: 4px !important;
margin: 4px 0 18px 0 !important;
gap: 0 !important;
}
#modal-auth .auth-tab {
flex: 1 !important;
text-align: center !important;
padding: 10px 8px !important;
border-radius: 9px !important;
font-size: 12.5px !important;
font-weight: 800 !important;
letter-spacing: 0.6px !important;
color: rgba(255,255,255,0.5) !important;
background: transparent !important;
border: none !important;
transition: all .15s ease !important;
cursor: pointer !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}
#modal-auth .auth-tab.active {
background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
color: #000 !important;
box-shadow: 0 3px 12px rgba(251,191,36,0.35) !important;
text-shadow: none !important;
}
/* Body fields: clean tall inputs */
#modal-auth .bs-input {
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 10px !important;
padding: 14px 14px !important;
font-size: 14.5px !important;
color: #fff !important;
width: 100% !important;
transition: border-color .15s, background .15s !important;
}
#modal-auth .bs-input:focus {
border-color: #fbbf24 !important;
background: rgba(255,255,255,0.06) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(251,191,36,0.15) !important;
}
#modal-auth .bs-input::placeholder { color: rgba(255,255,255,0.35) !important; }
#modal-auth .bs-field { margin-bottom: 12px !important; }
/* Main CTA button (Login/Register submit) */
#modal-auth #btn-do-mlogin,
#modal-auth #btn-do-mregister {
width: 100% !important;
padding: 15px 20px !important;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
color: #1a1300 !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 0.4px !important;
border: none !important;
border-radius: 12px !important;
margin-top: 6px !important;
box-shadow: 0 6px 18px -4px rgba(251,191,36,0.5) !important;
cursor: pointer !important;
}
#modal-auth #btn-do-mlogin:active,
#modal-auth #btn-do-mregister:active {
transform: translateY(1px) !important;
box-shadow: 0 3px 10px -2px rgba(251,191,36,0.5) !important;
}
/* Forgot password link: bigger touch target */
#mlogin-forgot-link {
text-align: center !important;
margin-top: 16px !important;
padding: 8px !important;
font-size: 13px !important;
color: rgba(255,255,255,0.55) !important;
cursor: pointer !important;
user-select: none !important;
border-radius: 8px !important;
transition: color .15s, background .15s !important;
}
#mlogin-forgot-link:hover { color: #fbbf24 !important; background: rgba(251,191,36,0.06) !important; }
/* Brand logo: slightly larger + better shadow */
#modal-auth img[src*="tiger-welcome"] {
width: 84px !important; height: 84px !important;
}
/* RS copy head (welcome back title from CMS) — tighter */
#modal-auth .rs-copy-head {
margin: 4px 0 14px !important;
}
/* Form panels: consistent padding */
#mauth-form-login, #mauth-form-register {
padding: 0 !important;
}
/* SMS verify field (when shown): consistent spacing */
#modal-auth .bs-field[data-d2-applied="1"] { margin-top: 0 !important; margin-bottom: 12px !important; }
/* Bs-hint warning style */
#modal-auth .bs-hint.warn {
background: rgba(251,191,36,0.08) !important;
border-left: 3px solid #fbbf24 !important;
border-radius: 0 8px 8px 0 !important;
padding: 8px 10px !important;
font-size: 11.5px !important;
color: #fbbf24 !important;
margin: -4px 0 12px !important;
}
}
/* ═══════════ f96-auth modal redesign 2026-05-26 ═══════════ */
/* Neutralize legacy rules from mobile-phase1.css that fight new layout */
#modal-auth.modal-backdrop .modal.f96-auth {
background: linear-gradient(180deg, #0f2230 0%, #07131c 100%) !important;
border: 1px solid rgba(251,191,36,0.15) !important;
border-radius: 22px !important;
box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
max-width: 420px !important;
width: 100% !important;
padding: 28px 22px 22px !important;
position: relative !important;
overflow: visible !important;
}
@media (max-width: 640px) {
#modal-auth.modal-backdrop .modal.f96-auth {
border-radius: 22px 22px 0 0 !important;
max-width: 100% !important;
padding: 22px 18px 24px !important;
}
}
/* Close button (circular top-right) */
.f96-auth .f96a-close {
position: absolute; top: 12px; right: 12px;
width: 34px; height: 34px; border-radius: 50%;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.75); font-size: 15px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s, transform .15s;
z-index: 5;
}
.f96-auth .f96a-close:hover { background: rgba(251,191,36,0.18); color: #fbbf24; transform: scale(1.05); }
/* Brand header */
.f96-auth .f96a-brand {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; margin-bottom: 18px; padding-top: 6px;
}
.f96-auth .f96a-mascot {
width: 78px; height: 78px; border-radius: 50%;
background: linear-gradient(135deg, #fff 0%, #ffe9a8 100%);
padding: 4px; border: 2px solid #fbbf24;
box-shadow: 0 6px 22px rgba(251,191,36,0.45);
object-fit: contain;
}
.f96-auth .f96a-name {
margin-top: 12px; font-size: 24px; font-weight: 900; letter-spacing: 2.5px;
background: linear-gradient(90deg, #ef4444 0%, #fbbf24 50%, #ef4444 100%);
background-size: 200% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: bs-gold-flow 3s linear infinite;
}
.f96-auth .f96a-tag {
margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: 3.5px;
color: #fbbf24; opacity: 0.85;
}
/* Tabs — pill toggle (override legacy .auth-tabs/.auth-tab rules) */
#modal-auth .f96a-tabs {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 14px !important;
padding: 4px !important;
margin: 4px 0 22px 0 !important;
position: relative !important;
width: 100% !important;
max-width: 320px !important;
margin-left: auto !important;
margin-right: auto !important;
}
#modal-auth .f96a-tab {
width: 100% !important;
min-width: 0 !important;
text-decoration: none !important;
padding: 12px 6px !important;
text-align: center !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
color: rgba(255,255,255,0.5) !important;
background: transparent !important;
border: none !important;
border-radius: 10px !important;
cursor: pointer !important;
transition: all .2s ease !important;
white-space: nowrap !important;
line-height: 1.2 !important;
font-family: inherit !important;
text-transform: uppercase !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#modal-auth .f96a-tab:hover { color: rgba(255,255,255,0.75) !important; }
#modal-auth .f96a-tab.active {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
color: #1a1300 !important;
box-shadow: 0 4px 14px -2px rgba(251,191,36,0.5) !important;
text-shadow: none !important;
}
/* Panels */
.f96-auth .f96a-panel { display: block; }
.f96-auth .f96a-panel.hidden { display: none !important; }
/* Form fields */
.f96-auth .f96a-field {
margin-bottom: 14px;
position: relative;
}
.f96-auth .f96a-field > label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
color: rgba(255,255,255,0.55);
margin-bottom: 6px;
text-transform: uppercase;
}
.f96-auth .f96a-field .f96a-opt {
font-weight: 500; text-transform: none; opacity: 0.6; letter-spacing: 0; font-size: 10.5px;
}
.f96-auth .f96a-input {
width: 100% !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 11px !important;
padding: 13px 14px !important;
font-size: 14.5px !important;
color: #ffffff !important;
font-family: inherit !important;
transition: border-color .15s, background .15s, box-shadow .15s !important;
}
.f96-auth .f96a-input::placeholder { color: rgba(255,255,255,0.3) !important; }
.f96-auth .f96a-input:focus {
border-color: #fbbf24 !important;
background: rgba(255,255,255,0.06) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(251,191,36,0.18) !important;
}
/* Hints */
.f96-auth .f96a-hint {
font-size: 11px;
color: rgba(255,255,255,0.45);
margin-top: 5px;
line-height: 1.4;
}
.f96-auth .f96a-hint-warn {
color: #fbbf24;
background: rgba(251,191,36,0.08);
border-left: 3px solid #fbbf24;
padding: 6px 10px;
border-radius: 0 8px 8px 0;
font-weight: 600;
}
/* Phone field */
.f96-auth .f96a-phone {
display: flex !important;
align-items: stretch !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 11px !important;
overflow: hidden !important;
background: rgba(255,255,255,0.04) !important;
transition: border-color .15s, box-shadow .15s !important;
}
.f96-auth .f96a-phone:focus-within {
border-color: #fbbf24 !important;
box-shadow: 0 0 0 3px rgba(251,191,36,0.18) !important;
}
.f96-auth .f96a-phone-cc {
padding: 13px 14px;
background: rgba(0,0,0,0.25);
color: #fbbf24;
font-size: 14.5px;
font-weight: 700;
font-family: ui-monospace, monospace;
border-right: 1px solid rgba(255,255,255,0.06);
}
.f96-auth .f96a-phone-input {
border: none !important;
flex: 1 1 auto !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.f96-auth .f96a-phone-input:focus { box-shadow: none !important; background: transparent !important; }
/* Password eye toggle */
.f96-auth .f96a-pwfield { position: relative; }
.f96-auth .f96a-pwfield .f96a-input { padding-right: 44px !important; }
.f96-auth .f96a-eye {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
background: transparent; border: 0; padding: 6px; cursor: pointer;
color: rgba(255,255,255,0.45); font-size: 16px;
/* offset for label above */
margin-top: 14px;
}
.f96-auth .f96a-pwfield > label + .f96a-input + .f96a-eye { margin-top: 0; top: 50%; }
.f96-auth .f96a-eye:hover { color: #fbbf24; }
/* Password strength bar */
.f96-auth .f96a-pw-strength { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.06); margin-top: 6px; overflow: hidden; }
.f96-auth .f96a-pw-strength > div { height: 100%; width: 0; transition: width 0.3s; }
.f96-auth .f96a-pw-strength-label { font-size: 10px; margin-top: 3px; min-height: 12px; color: rgba(255,255,255,0.4); }
/* OTP */
.f96-auth .f96a-otp .f96a-otp-label { font-size: 11px; color: #60a5fa; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 6px; text-transform: uppercase; }
.f96-auth .f96a-otp-row { display: flex; gap: 8px; }
.f96-auth .f96a-otp-input { flex: 1 1 auto; text-align: center !important; letter-spacing: 4px !important; font-family: ui-monospace, monospace !important; font-size: 16px !important; }
.f96-auth .f96a-otp-send {
padding: 0 14px; font-size: 12px; font-weight: 700;
background: rgba(59,130,246,0.18); color: #60a5fa;
border: 1px solid rgba(59,130,246,0.5); border-radius: 11px;
cursor: pointer; white-space: nowrap;
transition: background .15s, border-color .15s;
}
.f96-auth .f96a-otp-send:hover { background: rgba(59,130,246,0.3); }
/* CTA button */
.f96-auth .f96a-cta,
#modal-auth .btn-gold.f96a-cta {
width: 100% !important;
padding: 15px 20px !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
color: #1a1300 !important;
border: none !important;
border-radius: 13px !important;
cursor: pointer !important;
box-shadow: 0 8px 22px -4px rgba(251,191,36,0.55) !important;
margin-top: 6px !important;
text-transform: uppercase !important;
transition: transform .12s, box-shadow .15s !important;
}
.f96-auth .f96a-cta:hover { box-shadow: 0 10px 26px -4px rgba(251,191,36,0.7) !important; }
.f96-auth .f96a-cta:active { transform: translateY(1px) !important; box-shadow: 0 4px 12px -2px rgba(251,191,36,0.55) !important; }
.f96-auth .f96a-cta:disabled { opacity: 0.5 !important; cursor: not-allowed !important; box-shadow: none !important; }
/* Forgot password link */
.f96-auth .f96a-forgot {
display: block;
text-align: center;
margin-top: 14px;
padding: 10px;
font-size: 13px;
color: rgba(255,255,255,0.5);
cursor: pointer;
user-select: none;
border-radius: 9px;
transition: color .15s, background .15s;
}
.f96-auth .f96a-forgot:hover { color: #fbbf24; background: rgba(251,191,36,0.06); }
/* Switch link (bottom) */
.f96-auth .f96a-switch {
text-align: center;
margin-top: 14px;
font-size: 12.5px;
color: rgba(255,255,255,0.5);
}
.f96-auth .f96a-switch a {
color: #fbbf24;
font-weight: 800;
cursor: pointer;
margin-left: 5px;
text-decoration: none;
border-bottom: 1px dashed rgba(251,191,36,0.4);
padding-bottom: 1px;
transition: color .15s, border-color .15s;
}
.f96-auth .f96a-switch a:hover { color: #fbbf24; border-bottom-color: #fbbf24; }
/* Turnstile holder */
.f96-auth .f96a-ts { display: flex; justify-content: center; margin: 4px 0; }
.f96-auth .f96a-ts:empty { display: none; }
/* Nuke legacy mobile-phase1 rules that styled .auth-tabs as underline */
#modal-auth .auth-tabs:not(.f96a-tabs) { display: none !important; }
/* ─── f96-auth 3-zone scroll layout 2026-05-26 ─── */
#modal-auth.modal-backdrop .modal.f96-auth {
display: flex !important;
flex-direction: column !important;
max-height: calc(100dvh - 24px) !important;
padding: 22px 18px 0 !important; /* bottom 0, footer handles its own padding */
overflow: hidden !important;
}
@media (max-width: 640px) {
#modal-auth.modal-backdrop .modal.f96-auth {
max-height: 100dvh !important;
padding: 22px 16px 0 !important;
border-radius: 22px 22px 0 0 !important;
}
}
/* Brand + tabs = fixed top */
.f96-auth .f96a-brand { flex: 0 0 auto; margin-bottom: 10px !important; padding-top: 4px; }
.f96-auth .f96a-tabs { flex: 0 0 auto; margin-bottom: 14px !important; }
/* Panel = takes remaining height, vertical flex container */
.f96-auth .f96a-panel {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.f96-auth .f96a-panel.hidden { display: none !important; }
/* Scrollable fields area */
.f96-auth .f96a-scroll {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: 10px !important;
/* scrollbar styling */
scrollbar-width: thin;
scrollbar-color: rgba(251,191,36,0.3) transparent;
}
.f96-auth .f96a-scroll::-webkit-scrollbar { width: 4px; }
.f96-auth .f96a-scroll::-webkit-scrollbar-track { background: transparent; }
.f96-auth .f96a-scroll::-webkit-scrollbar-thumb { background: rgba(251,191,36,0.3); border-radius: 2px; }
/* Sticky footer with CTA */
.f96-auth .f96a-footer {
flex: 0 0 auto !important;
position: relative !important;
padding-top: 12px !important;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
background: linear-gradient(180deg, transparent 0%, rgba(7,19,28,0.85) 35%, #07131c 100%) !important;
/* subtle top fade so scrolling content blends under */
margin-top: -12px;
}
.f96-auth .f96a-footer::before {
content: "";
position: absolute;
top: -16px; left: 0; right: 0; height: 16px;
background: linear-gradient(180deg, transparent, rgba(7,19,28,0.85));
pointer-events: none;
}
/* Tighter field spacing for compact display */
.f96-auth .f96a-field { margin-bottom: 10px !important; }
.f96-auth .f96a-field > label { margin-bottom: 4px !important; font-size: 10.5px !important; }
.f96-auth .f96a-input {
height: 48px !important;
padding: 0 14px !important;
border-radius: 11px !important;
box-sizing: border-box !important;
}
.f96-auth .f96a-hint { font-size: 10.5px !important; margin-top: 3px !important; }
.f96-auth .f96a-phone { height: 48px !important; }
.f96-auth .f96a-phone-cc { display: flex; align-items: center; padding: 0 14px !important; }
.f96-auth .f96a-phone-input { height: 48px !important; padding: 0 14px !important; }
.f96-auth .f96a-otp-input,
.f96-auth .f96a-otp-send { height: 48px !important; }
/* CTA inside footer — keep style, bigger touch */
.f96-auth .f96a-footer .f96a-cta { margin-top: 0 !important; }
.f96-auth .f96a-forgot { margin-top: 8px !important; padding: 6px !important; }
.f96-auth .f96a-switch { margin-top: 6px !important; }
/* Override legacy .modal max-height that conflicts */
#modal-auth.modal-backdrop .modal.f96-auth { max-height: 100dvh !important; }
@supports not (height: 100dvh) {
#modal-auth.modal-backdrop .modal.f96-auth { max-height: 100vh !important; }
}
/* ═══════════ f96-auth premium v2 — 2026-05-26 ═══════════
Goal: feel like Linear/Stripe/Revolut. Minimal · confident · gold accent. */
/* Modal container — generous padding, refined gradient */
#modal-auth.modal-backdrop .modal.f96-auth {
background: radial-gradient(ellipse at top center, #0f2737 0%, #07131c 70%) !important;
border: 1px solid rgba(251,191,36,0.12) !important;
border-radius: 24px !important;
box-shadow:
0 30px 80px rgba(0,0,0,0.7),
0 0 0 1px rgba(255,255,255,0.025) inset,
0 -1px 0 rgba(255,255,255,0.06) inset !important;
padding: 32px 26px 0 !important;
}
@media (max-width: 640px) {
#modal-auth.modal-backdrop .modal.f96-auth {
border-radius: 26px 26px 0 0 !important;
padding: 28px 20px 0 !important;
background: radial-gradient(ellipse at top center, #0f2737 0%, #07131c 60%) !important;
}
}
/* Brand wordmark — large + confident */
.f96-auth .f96a-brand {
text-align: center;
margin-bottom: 24px !important;
padding-top: 2px;
}
.f96-auth .f96a-name {
font-size: 30px !important;
font-weight: 900 !important;
letter-spacing: 4px !important;
margin: 0 !important;
line-height: 1 !important;
background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%) !important;
background-size: 200% auto !important;
-webkit-background-clip: text !important; background-clip: text !important;
-webkit-text-fill-color: transparent !important; color: transparent !important;
animation: bs-gold-flow 4s linear infinite !important;
}
.f96-auth .f96a-tag {
margin-top: 8px !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 4.5px !important;
color: rgba(251,191,36,0.7) !important;
text-transform: uppercase !important;
}
/* Tabs — refined pill with smoother transition */
#modal-auth .f96a-tabs {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
background: rgba(0,0,0,0.4) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 16px !important;
padding: 8px !important;
overflow: hidden !important;
margin: 0 auto 24px !important;
max-width: 320px !important;
width: 100% !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 16px -8px rgba(0,0,0,0.4) !important;
}
#modal-auth .f96a-tab {
width: 100% !important;
min-width: 0 !important;
padding: 10px 6px !important;
text-decoration: none !important;
text-align: center !important;
font-size: 12.5px !important;
font-weight: 800 !important;
letter-spacing: 1px !important;
color: rgba(255,255,255,0.45) !important;
background: transparent !important;
border: none !important;
border-radius: 9px !important;
cursor: pointer !important;
transition: color .22s ease, background .22s ease, box-shadow .22s ease, transform .12s ease !important;
white-space: nowrap !important;
line-height: 1.2 !important;
font-family: inherit !important;
text-transform: uppercase !important;
}
#modal-auth .f96a-tab:hover:not(.active) { color: rgba(255,255,255,0.85) !important; }
#modal-auth .f96a-tab.active {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
color: #1a1100 !important;
box-shadow: 0 2px 8px -2px rgba(251,191,36,0.55), 0 0 0 1px rgba(255,255,255,0.22) inset !important;
text-shadow: none !important;
text-decoration: none !important;
}
/* CMS-driven copy head (Welcome Back) — refined as panel intro */
.f96-auth .rs-copy-head {
text-align: center;
margin: 0 0 18px !important;
padding: 0 4px;
}
.f96-auth .rs-copy-head > div:first-child {
font-size: 17px !important;
font-weight: 800 !important;
color: #fbbf24 !important;
letter-spacing: 0.3px !important;
margin-bottom: 4px !important;
background: none !important;
-webkit-text-fill-color: #fbbf24 !important;
}
.f96-auth .rs-copy-head > div:nth-child(2) {
font-size: 12.5px !important;
color: rgba(203,213,225,0.7) !important;
line-height: 1.55 !important;
}
/* Field — modern floating label feel */
.f96-auth .f96a-field { margin-bottom: 14px !important; position: relative; }
.f96-auth .f96a-field > label {
display: block !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
color: rgba(255,255,255,0.5) !important;
margin-bottom: 6px !important;
text-transform: uppercase !important;
}
.f96-auth .f96a-field .f96a-opt {
font-weight: 500 !important; text-transform: none !important;
opacity: 0.55 !important; letter-spacing: 0 !important; font-size: 10px !important;
}
/* Inputs — bigger touch, refined border, subtle gold focus */
.f96-auth .f96a-input {
width: 100% !important;
height: 50px !important;
padding: 0 16px !important;
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 12px !important;
font-size: 15px !important;
color: #fff !important;
font-family: inherit !important;
box-sizing: border-box !important;
transition: border-color .18s, background .18s, box-shadow .18s !important;
}
.f96-auth .f96a-input::placeholder { color: rgba(255,255,255,0.28) !important; font-weight: 400 !important; }
.f96-auth .f96a-input:hover { border-color: rgba(255,255,255,0.14) !important; background: rgba(255,255,255,0.05) !important; }
.f96-auth .f96a-input:focus {
border-color: #fbbf24 !important;
background: rgba(255,255,255,0.06) !important;
outline: none !important;
box-shadow: 0 0 0 4px rgba(251,191,36,0.15), 0 4px 14px -4px rgba(251,191,36,0.25) !important;
}
/* Hints */
.f96-auth .f96a-hint {
font-size: 11px !important;
color: rgba(255,255,255,0.4) !important;
margin-top: 6px !important;
line-height: 1.45 !important;
}
.f96-auth .f96a-hint-warn {
color: #fbbf24 !important;
background: rgba(251,191,36,0.08) !important;
border: 1px solid rgba(251,191,36,0.2) !important;
border-left: 3px solid #fbbf24 !important;
padding: 8px 12px !important;
border-radius: 8px !important;
font-weight: 600 !important;
margin-top: 6px !important;
}
/* Phone field */
.f96-auth .f96a-phone {
display: flex !important;
align-items: stretch !important;
height: 50px !important;
background: rgba(255,255,255,0.035) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 12px !important;
overflow: hidden !important;
transition: border-color .18s, box-shadow .18s !important;
}
.f96-auth .f96a-phone:hover { border-color: rgba(255,255,255,0.14) !important; }
.f96-auth .f96a-phone:focus-within {
border-color: #fbbf24 !important;
box-shadow: 0 0 0 4px rgba(251,191,36,0.15) !important;
}
.f96-auth .f96a-phone-cc {
display: flex !important;
align-items: center !important;
padding: 0 16px !important;
background: rgba(0,0,0,0.4) !important;
color: #fbbf24 !important;
font-size: 15px !important;
font-weight: 700 !important;
font-family: ui-monospace, monospace !important;
border-right: 1px solid rgba(255,255,255,0.05) !important;
}
.f96-auth .f96a-phone-input {
border: none !important;
flex: 1 1 auto !important;
height: 100% !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.f96-auth .f96a-phone-input:focus { box-shadow: none !important; background: transparent !important; }
/* Password eye toggle — properly positioned */
.f96-auth .f96a-pwfield { position: relative; }
.f96-auth .f96a-pwfield > label { margin-bottom: 6px !important; }
.f96-auth .f96a-pwfield .f96a-input { padding-right: 48px !important; }
.f96-auth .f96a-eye {
position: absolute !important;
right: 4px !important; bottom: 1px !important; /* sits inside input */
width: 44px !important; height: 48px !important;
background: transparent !important; border: 0 !important;
color: rgba(255,255,255,0.45) !important;
font-size: 16px !important;
cursor: pointer !important;
display: flex !important; align-items: center !important; justify-content: center !important;
margin: 0 !important;
transition: color .15s !important;
}
.f96-auth .f96a-eye:hover { color: #fbbf24 !important; }
/* OTP block */
.f96-auth .f96a-otp .f96a-otp-label {
font-size: 10px !important; color: #60a5fa !important;
font-weight: 700 !important; letter-spacing: 1.2px !important;
margin-bottom: 6px !important; text-transform: uppercase !important;
display: block !important;
}
.f96-auth .f96a-otp-row { display: flex !important; gap: 8px !important; }
.f96-auth .f96a-otp-input {
flex: 1 1 auto !important;
height: 50px !important;
text-align: center !important;
letter-spacing: 6px !important;
font-family: ui-monospace, monospace !important;
font-size: 18px !important;
font-weight: 700 !important;
}
.f96-auth .f96a-otp-send {
height: 50px !important; padding: 0 16px !important;
font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.5px !important;
background: rgba(96,165,250,0.15) !important; color: #60a5fa !important;
border: 1px solid rgba(96,165,250,0.4) !important; border-radius: 12px !important;
cursor: pointer !important; white-space: nowrap !important;
transition: background .15s, border-color .15s !important;
}
.f96-auth .f96a-otp-send:hover { background: rgba(96,165,250,0.25) !important; border-color: #60a5fa !important; }
/* CTA — big confident gold button with arrow */
.f96-auth .f96a-cta,
#modal-auth .btn-gold.f96a-cta {
width: 100% !important;
height: 54px !important;
padding: 0 24px !important;
font-size: 14.5px !important;
font-weight: 900 !important;
letter-spacing: 1.2px !important;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
color: #0f0a00 !important;
border: none !important;
border-radius: 14px !important;
cursor: pointer !important;
box-shadow:
0 10px 30px -6px rgba(251,191,36,0.55),
0 0 0 1px rgba(255,255,255,0.18) inset !important;
text-transform: uppercase !important;
transition: transform .12s, box-shadow .18s !important;
position: relative !important;
}
.f96-auth .f96a-cta:hover {
box-shadow: 0 14px 36px -6px rgba(251,191,36,0.75), 0 0 0 1px rgba(255,255,255,0.25) inset !important;
}
.f96-auth .f96a-cta:active {
transform: translateY(1px) !important;
box-shadow: 0 6px 18px -4px rgba(251,191,36,0.55) !important;
}
.f96-auth .f96a-cta:disabled { opacity: 0.45 !important; cursor: not-allowed !important; box-shadow: none !important; }
/* Forgot link — refined */
.f96-auth .f96a-forgot {
display: block !important;
text-align: center !important;
margin-top: 14px !important;
padding: 8px !important;
font-size: 13px !important;
color: #fbbf24 !important;
font-weight: 700 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
cursor: pointer !important;
user-select: none !important;
border-radius: 10px !important;
transition: color .15s, background .15s !important;
}
.f96-auth .f96a-forgot:hover { color: #fbbf24 !important; background: rgba(251,191,36,0.05) !important; }
/* Bottom switch */
.f96-auth .f96a-switch {
text-align: center !important;
margin-top: 10px !important;
font-size: 13px !important;
color: rgba(255,255,255,0.45) !important;
}
.f96-auth .f96a-switch a {
color: #fbbf24 !important;
font-weight: 800 !important;
cursor: pointer !important;
margin-left: 6px !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(251,191,36,0.3) !important;
padding-bottom: 2px !important;
transition: color .15s, border-color .15s !important;
}
.f96-auth .f96a-switch a:hover { color: #fcd34d !important; border-bottom-color: #fcd34d !important; }
/* Close — refined */
.f96-auth .f96a-close {
position: absolute !important; top: 14px !important; right: 14px !important;
width: 36px !important; height: 36px !important; border-radius: 50% !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
color: rgba(255,255,255,0.7) !important;
font-size: 15px !important;
cursor: pointer !important;
display: flex !important; align-items: center !important; justify-content: center !important;
transition: background .15s, color .15s, transform .15s !important;
z-index: 10 !important;
}
.f96-auth .f96a-close:hover {
background: rgba(251,191,36,0.18) !important;
color: #fbbf24 !important;
transform: rotate(90deg) !important;
}
/* Sticky footer (recompute for new heights) */
.f96-auth .f96a-footer {
padding-top: 14px !important;
padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}
.f96-auth .f96a-scroll { padding-bottom: 14px !important; }
/* TS holder */
.f96-auth .f96a-ts:empty { display: none !important; margin: 0 !important; }
/* Fix: legacy mobile-phase1 .modal align-items:flex-end pushes f96-auth children right */
#modal-auth.modal-backdrop .modal.f96-auth {
align-items: stretch !important;
justify-content: flex-start !important;
}
/* ── f96-auth compact register fit (no-scroll fit on mobile) 2026-05-26 ── */
@media (max-width: 640px) {
/* Tighter modal padding */
#modal-auth.modal-backdrop .modal.f96-auth {
padding: 18px 18px 0 !important;
}
/* Smaller brand block */
.f96-auth .f96a-brand { margin-bottom: 14px !important; padding-top: 0 !important; }
.f96-auth .f96a-name { font-size: 24px !important; letter-spacing: 3.5px !important; }
.f96-auth .f96a-tag { font-size: 9.5px !important; letter-spacing: 3.5px !important; margin-top: 5px !important; }
/* Tighter tabs */
#modal-auth .f96a-tabs { margin: 0 auto 14px !important; padding: 4px !important; }
#modal-auth .f96a-tab { padding: 9px 6px !important; font-size: 12px !important; }
/* Hide CMS welcome head in register panel (save vertical space) */
#mauth-form-register .rs-copy-head { display: none !important; }
/* In login panel, compress CMS head */
#mauth-form-login .rs-copy-head { margin: 0 0 10px !important; }
#mauth-form-login .rs-copy-head > div:first-child { font-size: 15px !important; margin-bottom: 2px !important; }
#mauth-form-login .rs-copy-head > div:nth-child(2) { font-size: 11.5px !important; }
/* Compact fields */
.f96-auth .f96a-field { margin-bottom: 9px !important; }
.f96-auth .f96a-field > label { font-size: 9.5px !important; letter-spacing: 1px !important; margin-bottom: 3px !important; }
.f96-auth .f96a-input { height: 44px !important; font-size: 14px !important; padding: 0 13px !important; border-radius: 10px !important; }
.f96-auth .f96a-hint { font-size: 10px !important; margin-top: 3px !important; }
.f96-auth .f96a-hint-warn { padding: 6px 10px !important; font-size: 10.5px !important; }
/* Phone field same compact height */
.f96-auth .f96a-phone { height: 44px !important; border-radius: 10px !important; }
.f96-auth .f96a-phone-cc { padding: 0 14px !important; font-size: 14px !important; }
.f96-auth .f96a-phone-input { height: 44px !important; padding: 0 13px !important; }
/* OTP same compact */
.f96-auth .f96a-otp-input,
.f96-auth .f96a-otp-send { height: 44px !important; }
/* Eye toggle vertically aligned to compact input */
.f96-auth .f96a-eye { height: 44px !important; bottom: 0 !important; }
/* Compact CTA */
.f96-auth .f96a-cta { height: 50px !important; font-size: 14px !important; border-radius: 12px !important; }
/* Footer tighter padding */
.f96-auth .f96a-footer { padding-top: 10px !important; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
.f96-auth .f96a-forgot { margin-top: 8px !important; padding: 6px !important; font-size: 12px !important; }
.f96-auth .f96a-switch { margin-top: 8px !important; font-size: 12px !important; }
/* Scroll area can be smaller now since most content fits */
.f96-auth .f96a-scroll { padding-bottom: 6px !important; }
}
/* ── f96-auth ultra-compact for iPhone 17 / modern phones — 2026-05-26 ── */
@media (max-width: 640px) {
/* Aggressive: hide ALL CMS copy heads on mobile (Welcome Back / Join the Frenzy) */
.f96-auth .rs-copy-head { display: none !important; }
/* Brand even smaller */
.f96-auth .f96a-name { font-size: 22px !important; letter-spacing: 3px !important; }
.f96-auth .f96a-tag { font-size: 9px !important; letter-spacing: 3px !important; margin-top: 4px !important; }
.f96-auth .f96a-brand { margin-bottom: 12px !important; }
/* Tabs */
#modal-auth .f96a-tab { padding: 8px 6px !important; font-size: 11.5px !important; }
#modal-auth .f96a-tabs { margin: 0 auto 12px !important; max-width: 280px !important; }
/* Fields ultra-tight */
.f96-auth .f96a-field { margin-bottom: 7px !important; }
.f96-auth .f96a-field > label { font-size: 9px !important; margin-bottom: 2px !important; letter-spacing: 0.8px !important; }
.f96-auth .f96a-input { height: 42px !important; font-size: 13.5px !important; padding: 0 12px !important; }
.f96-auth .f96a-phone { height: 42px !important; }
.f96-auth .f96a-phone-cc { font-size: 13.5px !important; padding: 0 12px !important; }
.f96-auth .f96a-phone-input { height: 42px !important; padding: 0 12px !important; }
.f96-auth .f96a-hint { font-size: 9.5px !important; margin-top: 2px !important; line-height: 1.35 !important; }
.f96-auth .f96a-hint-warn { padding: 4px 8px !important; font-size: 9.5px !important; margin-top: 3px !important; }
/* Eye toggle align to compact input */
.f96-auth .f96a-eye { height: 42px !important; }
/* CTA bigger but acceptable */
.f96-auth .f96a-cta { height: 48px !important; font-size: 13.5px !important; }
/* Footer minimal */
.f96-auth .f96a-footer { padding-top: 8px !important; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
.f96-auth .f96a-forgot { margin-top: 6px !important; padding: 4px !important; font-size: 11.5px !important; }
.f96-auth .f96a-switch { margin-top: 6px !important; font-size: 11.5px !important; }
/* Hide scrollbar visually but keep scroll capability (in case touch overflow) */
.f96-auth .f96a-scroll { scrollbar-width: none !important; padding-bottom: 4px !important; }
.f96-auth .f96a-scroll::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
/* Modal even tighter padding */
#modal-auth.modal-backdrop .modal.f96-auth { padding: 16px 18px 0 !important; }
}
/* ═══════════════════════════════════════════════════
Auth tabs final containment — 2026-05-27 night
Cascade winner: appended last for max specificity.
═══════════════════════════════════════════════════ */
#modal-auth .f96a-tabs,
.f96-auth .f96a-tabs {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.4)) !important;
border: 1px solid rgba(251,191,36,0.12) !important;
border-radius: 18px !important;
padding: 7px !important;
overflow: hidden !important;
margin: 0 auto 22px !important;
max-width: 320px !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.04) inset,
0 0 0 1px rgba(0,0,0,0.5) inset,
0 8px 24px -12px rgba(0,0,0,0.6) !important;
}
#modal-auth .f96a-tab,
.f96-auth .f96a-tab {
width: 100% !important;
min-width: 0 !important;
padding: 9px 6px !important;
text-align: center !important;
font-size: 12.5px !important;
font-weight: 800 !important;
letter-spacing: 1.2px !important;
color: rgba(255,255,255,0.5) !important;
background: transparent !important;
border: none !important;
border-radius: 11px !important;
cursor: pointer !important;
text-decoration: none !important;
text-transform: uppercase !important;
white-space: nowrap !important;
line-height: 1.2 !important;
transition: color .2s, background .2s, transform .12s !important;
position: relative !important;
}
#modal-auth .f96a-tab:hover:not(.active),
.f96-auth .f96a-tab:hover:not(.active) {
color: rgba(255,255,255,0.85) !important;
background: rgba(255,255,255,0.03) !important;
}
#modal-auth .f96a-tab.active,
.f96-auth .f96a-tab.active {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
color: #1a1100 !important;
text-decoration: none !important;
box-shadow:
0 0 0 1px rgba(255,255,255,0.3) inset,
0 -2px 0 rgba(0,0,0,0.18) inset !important;
text-shadow: 0 1px 0 rgba(255,255,255,0.15) !important;
}
/* ═══════════════════════════════════════════════════
Auth tab REDESIGN — iOS-style segmented control 2026-05-27
═══════════════════════════════════════════════════ */
#modal-auth .f96seg,
.f96-auth .f96seg {
position: relative !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
background: linear-gradient(180deg, #0c1827 0%, #07111c 100%) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 14px !important;
padding: 6px !important;
margin: 0 auto 22px !important;
max-width: 300px !important;
width: 100% !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.04) inset,
0 2px 0 rgba(0,0,0,0.4) inset,
0 6px 18px -12px rgba(0,0,0,0.6) !important;
overflow: hidden !important;
}
/* Sliding gold pill indicator */
#modal-auth .f96seg-pill,
.f96-auth .f96seg-pill {
position: absolute !important;
top: 6px !important;
bottom: 6px !important;
left: 6px !important;
width: calc(50% - 6px) !important;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
border-radius: 10px !important;
box-shadow:
0 0 0 1px rgba(255,255,255,0.22) inset,
0 -1px 0 rgba(0,0,0,0.14) inset,
0 4px 12px -6px rgba(251,191,36,0.4) !important;
transition: transform .35s cubic-bezier(.34,1.32,.56,1) !important;
pointer-events: none !important;
z-index: 0 !important;
}
#modal-auth .f96seg[data-active="register"] .f96seg-pill,
.f96-auth .f96seg[data-active="register"] .f96seg-pill {
transform: translateX(100%) !important;
}
/* Buttons sit on top of pill */
#modal-auth .f96seg-opt,
.f96-auth .f96seg-opt {
position: relative !important;
z-index: 1 !important;
background: transparent !important;
border: none !important;
padding: 10px 6px !important;
text-align: center !important;
font-size: 12.5px !important;
font-weight: 800 !important;
letter-spacing: 1.4px !important;
text-transform: uppercase !important;
text-decoration: none !important;
color: rgba(255,255,255,0.48) !important;
cursor: pointer !important;
transition: color .25s ease !important;
white-space: nowrap !important;
line-height: 1.2 !important;
font-family: inherit !important;
text-shadow: none !important;
}
#modal-auth .f96seg-opt:hover:not(.active),
.f96-auth .f96seg-opt:hover:not(.active) {
color: rgba(255,255,255,0.85) !important;
}
#modal-auth .f96seg-opt.active,
.f96-auth .f96seg-opt.active {
color: #1a1100 !important;
text-shadow: 0 1px 0 rgba(255,255,255,0.12) !important;
}
/* Mobile compact */
@media (max-width: 520px){
#modal-auth .f96seg, .f96-auth .f96seg { max-width: 280px !important; padding: 5px !important; }
#modal-auth .f96seg-pill, .f96-auth .f96seg-pill { top: 5px !important; bottom: 5px !important; left: 5px !important; width: calc(50% - 5px) !important; }
#modal-auth .f96seg-opt, .f96-auth .f96seg-opt { padding: 9px 6px !important; font-size: 12px !important; letter-spacing: 1.2px !important; }
}
/* ABSOLUTE FINAL — auth segmented control containment 2026-05-27 */
#modal-auth .f96seg, .f96-auth .f96seg, #modal-auth div.f96seg {
padding: 6px !important;
height: auto !important;
min-height: 52px !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
margin: 0 auto 22px !important;
max-width: 300px !important;
}
#modal-auth .f96seg-pill, .f96-auth .f96seg-pill {
position: absolute !important;
top: 6px !important;
bottom: 6px !important;
left: 6px !important;
width: calc(50% - 6px) !important;
height: auto !important;
box-sizing: border-box !important;
}
/* ════════════════════════════════════════════════════
Profile Modal v2 — redesigned 2026-05-27
FRENZY96 dark + gold, English-only, card-based
════════════════════════════════════════════════════ */
#modal-profile .pf-v2{
background: linear-gradient(180deg, #0a1622 0%, #07131c 100%) !important;
border: 1px solid rgba(251,191,36,0.18) !important;
border-radius: 18px !important;
overflow: hidden !important;
max-height: 92vh !important;
display: flex !important;
flex-direction: column !important;
}
/* Header */
.pf-head{
padding: 18px 18px 0;
background: linear-gradient(180deg, rgba(251,191,36,0.04) 0%, transparent 60%);
}
.pf-head-row{ display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pf-avatar{
width: 52px; height: 52px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 800;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color: #0a1622;
box-shadow: 0 4px 14px -4px rgba(251,191,36,0.5);
flex-shrink: 0;
}
.pf-head-meta{ flex: 1; min-width: 0; }
.pf-head-name{
font-size: 17px; font-weight: 800;
color: #fff;
letter-spacing: -0.1px;
}
.pf-head-sub{
font-size: 12px; color: #94a3b8;
margin-top: 4px;
display: flex; align-items: center; gap: 6px;
}
.pf-dot{ opacity: 0.4; }
.pf-vip-pill{
display: inline-flex;
padding: 2px 8px;
background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(251,191,36,0.06));
border: 1px solid rgba(251,191,36,0.35);
border-radius: 4px;
color: #fbbf24;
font-weight: 800;
font-size: 10.5px;
letter-spacing: 0.4px;
}
.pf-close{
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: #94a3b8;
width: 34px; height: 34px;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
display: flex; align-items: center; justify-content: center;
transition: all .18s;
flex-shrink: 0;
}
.pf-close:hover{ background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.35); }
/* Tabs */
.pf-tabs{
display: flex; gap: 4px;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
padding: 4px;
margin: 0 0 0;
}
.pf-tab{
flex: 1 1 auto;
display: inline-flex; align-items: center; justify-content: center;
gap: 5px;
padding: 9px 10px;
background: transparent;
border: none;
border-radius: 8px;
color: rgba(255,255,255,0.55);
font-size: 12px; font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: all .18s ease;
font-family: inherit;
}
.pf-tab svg{ opacity: 0.75; }
.pf-tab:hover:not(.active){
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.85);
}
.pf-tab.active{
background: rgba(255,255,255,0.95);
color: #0a1622;
font-weight: 800;
box-shadow: 0 2px 8px -2px rgba(0,0,0,0.4);
}
.pf-tab.active svg{ opacity: 1; }
/* Body */
.pf-body{
flex: 1;
overflow-y: auto;
padding: 16px 18px;
display: flex; flex-direction: column;
gap: 10px;
}
/* Field card */
.pf-card{
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
padding: 12px 14px;
}
.pf-card-row{
display: flex; flex-direction: column; gap: 6px;
}
.pf-label{
font-size: 10px; font-weight: 800;
color: #94a3b8;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.pf-value{
font-size: 14px; font-weight: 600;
color: #fff;
letter-spacing: 0.1px;
}
.pf-value.mono{ font-family: var(--font-mono); }
.pf-value-readonly{
color: #cbd5e1;
}
.pf-input-row{
display: flex; gap: 8px; align-items: stretch;
}
.pf-input{
flex: 1;
background: rgba(0,0,0,0.35) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 8px !important;
color: #fff !important;
padding: 10px 12px !important;
font-size: 13px !important;
height: 40px !important;
}
.pf-input:focus{
border-color: #fbbf24 !important;
background: rgba(251,191,36,0.04) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(251,191,36,0.18) !important;
}
.pf-btn-save{
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #fff;
border: none;
padding: 0 16px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
transition: all .15s;
letter-spacing: 0.3px;
}
.pf-btn-save:hover{
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-1px);
}
.pf-btn-save:disabled{ opacity: 0.5; cursor: not-allowed; }
/* Bank/E-Wallet card */
.pf-bank-card{
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
padding: 12px 14px;
display: flex; align-items: center; gap: 12px;
transition: border-color .18s;
}
.pf-bank-card:hover{ border-color: rgba(251,191,36,0.3); }
.pf-bank-meta{ flex: 1; min-width: 0; }
.pf-bank-name{
font-size: 14px; font-weight: 800;
color: #fff;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.pf-bank-no{
font-size: 12px; color: #94a3b8;
margin-top: 3px;
font-family: var(--font-mono);
letter-spacing: 0.3px;
}
.pf-bank-act{
display: flex; gap: 6px;
flex-shrink: 0;
}
.pf-bank-act-btn{
background: transparent;
border: 1px solid rgba(148,163,184,0.4);
color: #94a3b8;
padding: 5px 10px;
border-radius: 6px;
font-size: 11px; font-weight: 700;
cursor: pointer;
transition: all .15s;
}
.pf-bank-act-btn:hover{
background: rgba(148,163,184,0.08);
color: #cbd5e1;
}
.pf-bank-act-btn.default{
background: rgba(251,191,36,0.12);
border-color: rgba(251,191,36,0.4);
color: #fbbf24;
}
.pf-bank-act-btn.danger:hover{
background: rgba(239,68,68,0.12);
border-color: rgba(239,68,68,0.5);
color: #ef4444;
}
.pf-default-badge{
display: inline-block;
padding: 2px 7px;
background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(251,191,36,0.1));
border: 1px solid rgba(251,191,36,0.45);
border-radius: 4px;
color: #fbbf24;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.5px;
}
.pf-sec-head{
font-size: 11px; font-weight: 800;
color: #fbbf24;
letter-spacing: 1px;
text-transform: uppercase;
margin: 8px 0 6px;
padding-bottom: 6px;
border-bottom: 1px dashed rgba(251,191,36,0.18);
display: flex; align-items: center; gap: 6px;
}
/* Footer */
.pf-foot{
padding: 12px 18px 18px;
border-top: 1px solid rgba(255,255,255,0.06);
background: rgba(0,0,0,0.25);
}
.pf-btn-logout{
width: 100%;
background: transparent;
border: 1px solid rgba(239,68,68,0.35);
color: #ef4444;
padding: 12px;
border-radius: 10px;
font-size: 13px; font-weight: 700;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
gap: 8px;
transition: all .15s;
letter-spacing: 0.4px;
}
.pf-btn-logout:hover{
background: rgba(239,68,68,0.08);
border-color: rgba(239,68,68,0.6);
color: #f87171;
}
/* Empty state */
.pf-empty{
text-align: center;
padding: 32px 16px;
color: #94a3b8;
font-size: 13px;
}
.pf-empty-icon{
font-size: 36px;
margin-bottom: 8px;
opacity: 0.5;
}
/* Add bank form */
.pf-add-form{
background: rgba(251,191,36,0.04);
border: 1px dashed rgba(251,191,36,0.3);
border-radius: 10px;
padding: 14px;
margin-top: 12px;
}
.pf-add-form .pf-card-row + .pf-card-row{ margin-top: 10px; }
/* ════════════════════════════════════════════════════
Profile v2 — extras: balance / stats / referral (2026-05-27)
════════════════════════════════════════════════════ */
.pf-balance-card{
margin-top: 4px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(251,191,36,0.14) 0%, rgba(251,191,36,0.04) 100%);
border: 1px solid rgba(251,191,36,0.35);
border-radius: 12px;
text-align: center;
}
.pf-bal-label{
font-size: 10.5px; font-weight: 700;
color: #fbbf24;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.pf-bal-val{
font-size: 26px; font-weight: 900;
font-family: var(--font-mono);
color: #fff;
margin-top: 4px;
letter-spacing: -0.4px;
}
.pf-bal-sub{
font-size: 11px;
color: #cbd5e1;
margin-top: 4px;
}
/* Lifetime stats — 2x2 grid */
.pf-stats-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.pf-stat-card{
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
padding: 10px 12px;
}
.pf-stat-lbl{
font-size: 10px; font-weight: 700;
color: #94a3b8;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.pf-stat-val{
font-size: 16px; font-weight: 800;
font-family: var(--font-mono);
color: #fff;
margin-top: 3px;
letter-spacing: -0.2px;
}
.pf-stat-val-sm{
font-size: 14px; font-weight: 800;
font-family: var(--font-mono);
color: #fff;
margin-left: auto;
}
.pf-stat-sub{
font-size: 10.5px; color: #94a3b8;
margin-top: 2px;
}
/* Referral card */
.pf-ref-card{
background: linear-gradient(135deg, rgba(168,85,247,0.1) 0%, rgba(168,85,247,0.03) 100%);
border: 1px solid rgba(168,85,247,0.35);
border-radius: 12px;
padding: 14px;
}
.pf-ref-row{
display: flex; align-items: center; gap: 12px;
margin-bottom: 12px;
}
.pf-ref-info{ flex: 1; min-width: 0; }
.pf-ref-code{
font-size: 18px; font-weight: 900;
color: #a855f7;
margin-top: 4px;
letter-spacing: 1px;
}
.pf-btn-copy{
background: rgba(168,85,247,0.18);
border: 1px solid rgba(168,85,247,0.45);
color: #c084fc;
padding: 8px 14px;
border-radius: 8px;
font-size: 12px; font-weight: 700;
cursor: pointer;
transition: all .15s;
white-space: nowrap;
flex-shrink: 0;
}
.pf-btn-copy:hover{
background: rgba(168,85,247,0.3);
color: #fff;
}
.pf-ref-stats{
display: flex; gap: 12px;
padding: 8px 0;
border-top: 1px dashed rgba(168,85,247,0.2);
border-bottom: 1px dashed rgba(168,85,247,0.2);
}
.pf-ref-stats > div{
flex: 1;
display: flex; flex-direction: column;
gap: 2px;
}
.pf-ref-hint{
font-size: 11px;
color: #94a3b8;
text-align: center;
margin-top: 8px;
line-height: 1.5;
}
/* ════════════════════════════════════════════════════
Profile v3 — bottom-sheet rebuild 2026-05-27
Theme: deep-sea blue-black (#0E1621 / #13202E / #1e2e40)
════════════════════════════════════════════════════ */
#modal-profile .pf-v3{
background: #0E1621 !important;
border: 1px solid #1e2e40 !important;
border-radius: 16px 16px 0 0 !important;
max-width: 480px !important;
width: 100% !important;
max-height: 92dvh !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
position: relative;
}
@supports not (max-height: 92dvh){
#modal-profile .pf-v3{ max-height: 92vh !important; }
}
/* Bottom-sheet drag handle */
.pf3-drag-handle{
width: 36px; height: 4px;
background: #2c3e52;
border-radius: 2px;
margin: 8px auto 0;
flex-shrink: 0;
}
/* ─── Hero ─── */
.pf-v3 .pf3-hero{
padding: 14px 18px 16px;
background: linear-gradient(180deg, #0D2137 0%, #0E1621 100%);
border-bottom: 1px solid #1e2e40;
flex-shrink: 0;
}
.pf3-hero-top{
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.pf3-title{
font-size: 19px; font-weight: 800;
color: #fff; margin: 0;
letter-spacing: -0.2px;
}
.pf3-close{
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: #94a3b8;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all .15s;
}
.pf3-close:hover{
background: rgba(255,255,255,0.1);
color: #fff;
}
.pf3-hero-row{
display: flex; align-items: center; gap: 14px;
}
.pf3-avatar-wrap{ position: relative; flex-shrink: 0; }
.pf3-avatar{
width: 64px; height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, #FF8C42 0%, #FF6B1A 100%);
color: #1a0e00;
display: flex; align-items: center; justify-content: center;
font-size: 22px; font-weight: 800;
letter-spacing: 0.3px;
box-shadow: 0 4px 16px -4px rgba(255,140,66,0.45);
}
.pf3-avatar-cam{
position: absolute;
bottom: -2px; right: -2px;
width: 22px; height: 22px;
background: #1e2e40;
border: 2px solid #0E1621;
border-radius: 50%;
color: #cbd5e1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
padding: 0;
}
.pf3-hero-meta{ flex: 1; min-width: 0; }
.pf3-name{
font-size: 17px; font-weight: 700;
color: #fff;
letter-spacing: -0.1px;
}
.pf3-sub{
font-size: 12px; color: #94a3b8;
margin-top: 4px;
display: flex; gap: 6px; align-items: center;
}
.pf3-dot{ opacity: 0.45; }
.pf3-badges{
display: flex; gap: 6px; margin-top: 8px;
flex-wrap: wrap;
}
.pf3-badge{
padding: 3px 8px;
border-radius: 4px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.3px;
}
.pf3-badge-tier{
background: rgba(255,159,64,0.18);
color: #FF9F40;
border: 1px solid rgba(255,159,64,0.3);
}
.pf3-badge-active{
background: rgba(76,175,80,0.15);
color: #4CAF50;
border: 1px solid rgba(76,175,80,0.3);
}
.pf3-badge-since{
background: rgba(148,163,184,0.12);
color: #94a3b8;
border: 1px solid rgba(148,163,184,0.2);
}
/* ─── Body (scroll area) ─── */
.pf3-body{
flex: 1;
overflow-y: auto;
padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
display: flex; flex-direction: column;
gap: 12px;
}
.pf3-card{
background: #13202E;
border: 1px solid #1e2e40;
border-radius: 14px;
padding: 14px;
}
/* ─── Balance card ─── */
.pf3-balance{ padding: 14px 16px; }
.pf3-bal-head{
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 6px;
}
.pf3-mini-label{
font-size: 10px; font-weight: 700;
color: #94a3b8;
letter-spacing: 0.7px;
text-transform: uppercase;
}
.pf3-eye-btn{
background: transparent;
border: none;
color: #94a3b8;
width: 28px; height: 28px;
border-radius: 6px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.pf3-eye-btn:hover{ background: rgba(255,255,255,0.04); color: #fff; }
.pf3-bal-val{
font-size: 28px; font-weight: 900;
font-family: var(--font-mono);
color: #fff;
letter-spacing: -0.5px;
line-height: 1;
}
.pf3-bal-val.hidden-amount{ letter-spacing: 2px; }
.pf3-bal-split{
display: flex; align-items: stretch;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid #1e2e40;
}
.pf3-bal-sub{
flex: 1;
display: flex; flex-direction: column; gap: 2px;
text-align: left;
}
.pf3-bal-mono{
font-size: 13px; font-weight: 700;
font-family: var(--font-mono);
color: #cbd5e1;
}
.pf3-bal-divider{
width: 1px; background: #1e2e40;
margin: 0 12px;
}
/* ─── Quick Actions ─── */
.pf3-quick{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.pf3-qa{
background: #13202E;
border: 1px solid #1e2e40;
border-radius: 12px;
padding: 10px 6px;
cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 6px;
color: #94a3b8;
font-size: 11px; font-weight: 700;
transition: all .15s;
font-family: inherit;
}
.pf3-qa:hover{
background: #1a2a3a;
color: #cbd5e1;
}
.pf3-qa-icon{
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(148,163,184,0.1);
display: flex; align-items: center; justify-content: center;
color: #94a3b8;
transition: all .15s;
}
.pf3-qa-primary{
background: rgba(93,202,165,0.12);
border-color: rgba(93,202,165,0.3);
color: #5DCAA5;
}
.pf3-qa-primary .pf3-qa-icon{
background: rgba(93,202,165,0.18);
color: #5DCAA5;
}
.pf3-qa-primary:hover{
background: rgba(93,202,165,0.2);
color: #6FE3BB;
}
/* ─── Section head ─── */
.pf3-section-head{
display: flex; align-items: center; gap: 12px;
margin: 6px 2px 0;
}
.pf3-section-head span{
font-size: 10px; font-weight: 800;
color: #5e6e80;
letter-spacing: 1.5px;
}
.pf3-section-line{
flex: 1;
height: 1px;
background: linear-gradient(90deg, #1e2e40 0%, transparent 100%);
}
/* ─── Stats grid ─── */
.pf3-stats-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.pf3-stat{
background: #13202E;
border: 1px solid #1e2e40;
border-radius: 12px;
padding: 10px 12px;
}
.pf3-stat-top{
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
}
.pf3-stat-lbl{
font-size: 10px; font-weight: 700;
color: #94a3b8;
letter-spacing: 0.4px;
text-transform: uppercase;
}
.pf3-stat-dot{
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.pf3-stat-val{
font-size: 16px; font-weight: 800;
font-family: var(--font-mono);
margin-top: 4px;
letter-spacing: -0.2px;
}
.pf3-stat-sub{
font-size: 10px; color: #5e6e80;
margin-top: 2px;
}
/* ─── Refer card ─── */
.pf3-refer{ padding: 12px; }
.pf3-ref-row{
display: flex; align-items: center; gap: 10px;
background: #0B1622;
border: 1px solid #1e2e40;
border-radius: 10px;
padding: 10px 12px;
}
.pf3-ref-code-wrap{ flex: 1; min-width: 0; }
.pf3-ref-code{
font-size: 18px; font-weight: 800;
color: #FF9F40;
letter-spacing: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf3-ref-copy{
background: #0D2137;
border: 1px solid #1e2e40;
color: #5DCAA5;
padding: 8px 14px;
border-radius: 8px;
font-size: 12px; font-weight: 700;
cursor: pointer;
transition: all .15s;
flex-shrink: 0;
}
.pf3-ref-copy:hover{ background: #102a44; color: #6FE3BB; }
.pf3-ref-copy.copied{ background: rgba(76,175,80,0.18); color: #4CAF50; border-color: rgba(76,175,80,0.4); }
.pf3-ref-stats{
display: flex; align-items: stretch;
margin-top: 10px;
}
.pf3-ref-stat{
flex: 1;
display: flex; flex-direction: column; gap: 4px;
text-align: center;
}
.pf3-ref-stat-val{
font-size: 14px; font-weight: 800;
font-family: var(--font-mono);
color: #fff;
}
.pf3-ref-divider{
width: 1px; background: #1e2e40;
margin: 0 8px;
}
/* ─── Account menu ─── */
.pf3-menu{ padding: 0; overflow: hidden; }
.pf3-menu-item{
width: 100%;
background: transparent;
border: none;
padding: 12px 14px;
display: flex; align-items: center; gap: 12px;
cursor: pointer;
color: #fff;
transition: background .15s;
text-align: left;
font-family: inherit;
border-bottom: 1px solid #1e2e40;
}
.pf3-menu-item:last-child{ border-bottom: none; }
.pf3-menu-item:hover, .pf3-menu-item:active{
background: rgba(255,255,255,0.03);
}
.pf3-menu-icon{
width: 32px; height: 32px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.pf3-icon-blue{ background: rgba(59,130,246,0.15); color: #60a5fa; }
.pf3-icon-green{ background: rgba(93,202,165,0.15); color: #5DCAA5; }
.pf3-icon-orange{ background: rgba(255,159,64,0.15); color: #FF9F40; }
.pf3-icon-purple{ background: rgba(168,85,247,0.15); color: #c084fc; }
.pf3-icon-grey{ background: rgba(148,163,184,0.12); color: #94a3b8; }
.pf3-menu-meta{ flex: 1; min-width: 0; }
.pf3-menu-title{
font-size: 13px; font-weight: 600;
color: #fff;
}
.pf3-menu-sub{
font-size: 11px; color: #94a3b8;
margin-top: 2px;
}
.pf3-menu-arrow{
color: #5e6e80;
flex-shrink: 0;
}
.pf3-menu-badge{
padding: 3px 8px;
border-radius: 4px;
font-size: 10px; font-weight: 800;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.pf3-menu-badge-orange{
background: rgba(255,159,64,0.15);
color: #FF9F40;
border: 1px solid rgba(255,159,64,0.3);
}
.pf3-menu-badge-red{
background: rgba(239,68,68,0.18);
color: #ef4444;
}
/* ─── Logout button ─── */
.pf3-btn-logout{
width: 100%;
background: transparent;
border: 1px solid rgba(226,75,74,0.35);
color: #E24B4A;
padding: 12px;
border-radius: 10px;
font-size: 13px; font-weight: 700;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
gap: 8px;
transition: all .15s;
margin-top: 4px;
}
.pf3-btn-logout:hover{
background: rgba(226,75,74,0.08);
border-color: rgba(226,75,74,0.6);
}
.pf3-version{
text-align: center;
font-size: 10px;
color: #2a3a4e;
margin-top: 8px;
font-family: var(--font-mono);
}
/* ─── Sub-page overlay (slide in from right) ─── */
.pf3-subpage{
position: absolute;
inset: 0;
background: #0E1621;
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform .25s ease-out;
z-index: 10;
visibility: hidden;
}
.pf3-subpage.open{
transform: translateX(0);
visibility: visible;
}
.pf3-subpage-head{
display: flex; align-items: center; gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid #1e2e40;
flex-shrink: 0;
}
.pf3-back{
width: 32px; height: 32px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 50%;
color: #94a3b8;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all .15s;
}
.pf3-back:hover{ background: rgba(255,255,255,0.1); color: #fff; }
.pf3-subpage-title{
font-size: 16px; font-weight: 700;
color: #fff; margin: 0;
}
.pf3-subpage-body{
flex: 1;
overflow-y: auto;
padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px));
}
/* ════════════════════════════════════════════════════
Profile v3 — alignment + visual polish (2026-05-27)
Per Mz spec; appended last for max specificity
════════════════════════════════════════════════════ */
/* 1) Avatar camera icon — shrink to 18px, tight to bottom-right */
#modal-profile .pf3-avatar-cam{
width: 18px !important;
height: 18px !important;
bottom: -1px !important;
right: -1px !important;
border-width: 1.5px !important;
}
#modal-profile .pf3-avatar-cam svg{
width: 9px !important;
height: 9px !important;
}
/* 2) Badges — uniform 20px height, padding, font-size, vertical-center */
#modal-profile .pf3-badges{
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
#modal-profile .pf3-badge{
height: 20px !important;
padding: 2px 8px !important;
font-size: 11px !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
letter-spacing: 0.2px !important;
box-sizing: border-box !important;
}
/* 3) Quick Actions — 48x48 icon containers, 20px icons, 11px label */
#modal-profile .pf3-quick{
gap: 8px !important;
}
#modal-profile .pf3-qa{
padding: 8px 4px !important;
gap: 6px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
#modal-profile .pf3-qa-icon{
width: 48px !important;
height: 48px !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
#modal-profile .pf3-qa-icon svg{
width: 20px !important;
height: 20px !important;
}
#modal-profile .pf3-qa > span{
font-size: 11px !important;
line-height: 1.2 !important;
text-align: center !important;
font-weight: 700 !important;
}
/* 4) Stats — equal height, 12px padding, generous line spacing */
#modal-profile .pf3-stats-grid{
grid-auto-rows: 1fr !important;
gap: 8px !important;
}
#modal-profile .pf3-stat{
padding: 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
min-height: 86px !important;
}
#modal-profile .pf3-stat-top{
margin-bottom: 4px !important;
}
#modal-profile .pf3-stat-lbl{
font-size: 10px !important;
line-height: 1.3 !important;
overflow: visible !important;
white-space: normal !important;
}
#modal-profile .pf3-stat-val{
font-size: 16px !important;
margin-top: 4px !important;
margin-bottom: 4px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#modal-profile .pf3-stat-sub{
font-size: 10px !important;
margin-top: 2px !important;
line-height: 1.3 !important;
}
/* 5) Refer & Earn — code + Copy button vertical center, button fixed 70px */
#modal-profile .pf3-ref-row{
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
#modal-profile .pf3-ref-code-wrap{
display: flex !important;
align-items: center !important;
min-height: 36px !important;
}
#modal-profile .pf3-ref-code{
font-size: 17px !important;
line-height: 1 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
#modal-profile .pf3-ref-copy{
width: 70px !important;
min-width: 70px !important;
max-width: 70px !important;
height: 36px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
font-size: 12px !important;
font-weight: 700 !important;
box-sizing: border-box !important;
}
/* 6) Global — uniform 16px horizontal margin / 14px section gap / no truncation */
#modal-profile .pf3-body{
padding-left: 16px !important;
padding-right: 16px !important;
gap: 14px !important;
}
#modal-profile .pf3-section-head{
margin: 0 2px !important;
}
/* Allow text to wrap; show ellipsis only on single-line nowrap fields like code/balance */
#modal-profile .pf3-menu-title,
#modal-profile .pf3-menu-sub,
#modal-profile .pf3-stat-lbl,
#modal-profile .pf3-stat-sub,
#modal-profile .pf3-mini-label{
overflow: visible !important;
white-space: normal !important;
word-break: break-word !important;
}
/* Hero badges row — keep on single line if possible, else wrap gracefully */
#modal-profile .pf3-badges{
margin-top: 8px !important;
}
#modal-profile .pf3-hero-meta{
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
#modal-profile .pf3-name{
line-height: 1.2 !important;
}
#modal-profile .pf3-sub{
margin-top: 0 !important;
line-height: 1.3 !important;
}
/* Refer stats row — uniform alignment */
#modal-profile .pf3-ref-stats{
margin-top: 12px !important;
padding-top: 10px !important;
border-top: 1px solid #1e2e40 !important;
}
#modal-profile .pf3-ref-stat{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 3px !important;
}
#modal-profile .pf3-ref-stat-val{
font-size: 14px !important;
line-height: 1.2 !important;
}
/* Balance row — uniform align */
#modal-profile .pf3-bal-split{
align-items: stretch !important;
}
#modal-profile .pf3-bal-sub{
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 4px !important;
text-align: left !important;
}
#modal-profile .pf3-bal-mono{
line-height: 1.2 !important;
}
/* ════════════════════════════════════════════════════
Profile v3 — FINAL alignment polish (2026-05-27 night)
Appended last for max cascade priority
════════════════════════════════════════════════════ */
/* 1) Camera icon — bottom-right, 18px, not too big */
#modal-profile .pf3-avatar-wrap{
position: relative !important;
width: 64px !important;
height: 64px !important;
flex-shrink: 0 !important;
}
#modal-profile .pf3-avatar-cam{
position: absolute !important;
bottom: 0 !important;
right: 0 !important;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
border: 1.5px solid #0E1621 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #1e2e40 !important;
color: #cbd5e1 !important;
cursor: pointer !important;
}
#modal-profile .pf3-avatar-cam svg{
width: 9px !important;
height: 9px !important;
}
/* 2) Quick Actions — 4-col grid equal width, 48x48 icon containers */
#modal-profile .pf3-quick{
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
}
#modal-profile .pf3-qa{
width: 100% !important;
min-width: 0 !important;
padding: 8px 4px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
background: #13202E !important; /* same bg for ALL — no green container */
border: 1px solid #1e2e40 !important;
box-sizing: border-box !important;
}
#modal-profile .pf3-qa.pf3-qa-primary{
background: #13202E !important; /* Deposit container itself same as others */
border-color: #1e2e40 !important;
}
#modal-profile .pf3-qa-icon{
width: 48px !important;
height: 48px !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
background: rgba(148,163,184,0.1) !important;
color: #94a3b8 !important;
}
/* Only the Deposit ICON has green tint; container stays neutral */
#modal-profile .pf3-qa-primary .pf3-qa-icon{
background: rgba(93,202,165,0.15) !important;
color: #5DCAA5 !important;
}
#modal-profile .pf3-qa-primary{ color: #5DCAA5 !important; }
#modal-profile .pf3-qa-icon svg{
width: 20px !important;
height: 20px !important;
flex-shrink: 0 !important;
}
#modal-profile .pf3-qa > span{
font-size: 11px !important;
font-weight: 700 !important;
text-align: center !important;
line-height: 1.2 !important;
width: 100% !important;
}
/* 3) Lifetime Stats — 2-col equal width, minmax(0,1fr) prevents overflow */
#modal-profile .pf3-stats-grid{
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 8px !important;
width: 100% !important;
}
#modal-profile .pf3-stat{
min-width: 0 !important;
box-sizing: border-box !important;
}
/* 4) Badges — uniform 22px height, padding, gap, align-items center */
#modal-profile .pf3-badges{
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
margin-top: 8px !important;
}
#modal-profile .pf3-badge{
height: 22px !important;
padding: 2px 8px !important;
font-size: 11px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
box-sizing: border-box !important;
}
/* 5) Uniform 16px horizontal padding for whole body */
#modal-profile .pf3-body{
padding-left: 16px !important;
padding-right: 16px !important;
padding-top: 14px !important;
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
gap: 14px !important;
box-sizing: border-box !important;
}
/* All card-level elements 100% width with 16px hzn padding */
#modal-profile .pf3-card,
#modal-profile .pf3-quick,
#modal-profile .pf3-stats-grid,
#modal-profile .pf3-refer,
#modal-profile .pf3-menu,
#modal-profile .pf3-btn-logout,
#modal-profile .pf3-version,
#modal-profile .pf3-section-head{
width: 100% !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ════════════════════════════════════════════════════
Profile v3 — top spacing + height fix (2026-05-27)
════════════════════════════════════════════════════ */
/* 1) Drag handle area compact — total ≤20px */
#modal-profile .pf3-drag-handle{
width: 36px !important;
height: 4px !important;
margin: 6px auto 0 !important;
background: #2c3e52 !important;
border-radius: 2px !important;
flex-shrink: 0 !important;
}
/* Drag handle → Title gap ≤12px (drag 6+4=10px + hero pad-top 8px = ≤20px) */
#modal-profile .pf-v3 .pf3-hero{
padding: 8px 18px 16px !important;
}
/* 2) Bottom sheet ≥ 92dvh, fills viewport */
#modal-profile .pf-v3{
height: 92dvh !important;
max-height: 92dvh !important;
min-height: 600px !important; /* fallback for very short viewports */
}
@supports not (height: 92dvh){
#modal-profile .pf-v3{
height: 92vh !important;
max-height: 92vh !important;
}
}
/* 3) Body overflow-y auto + flex:1 to fill remaining space below hero */
#modal-profile .pf3-body{
flex: 1 1 auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
min-height: 0 !important; /* required for flex child to scroll */
}
/* Hero stays fixed-height — never shrinks/expands */
#modal-profile .pf-v3 .pf3-hero{
flex-shrink: 0 !important;
}
/* Subpage same height behavior */
#modal-profile .pf3-subpage{
height: 100% !important;
}
#modal-profile .pf3-subpage-body{
flex: 1 1 auto !important;
overflow-y: auto !important;
min-height: 0 !important;
}
/* Avatar cam — override global 44px touch-target min-height (2026-05-27) */
#modal-profile .pf3-avatar-cam{
min-height: 18px !important;
min-width: 18px !important;
max-height: 18px !important;
max-width: 18px !important;
line-height: 0 !important;
}
/* Profile v3 — drag handle color match + hide version footer (2026-05-27) */
#modal-profile .pf3-drag-handle{
background: #2c3e52 !important;
width: 36px !important;
height: 4px !important;
margin: 6px auto !important;
}
/* Wrap drag handle area in matching hero color — make modal bg = hero gradient start */
#modal-profile .pf-v3{
background: #0D2137 !important; /* match hero gradient TOP color */
}
/* Hero gradient now flows seamlessly from drag handle area */
#modal-profile .pf-v3 .pf3-hero{
background: linear-gradient(180deg, #0D2137 0%, #0E1621 100%) !important;
}
#modal-profile .pf3-body{
background: #0E1621 !important; /* body matches gradient end */
}
/* Hide version footer */
#modal-profile .pf3-version{
display: none !important;
}
/* ════════════════════════════════════════════════════
Desktop navbar — fit balance/bell/avatar inside (2026-05-27)
════════════════════════════════════════════════════ */
.top-nav{
width: 100% !important;
max-width: 1440px !important;
margin: 0 auto !important;
padding: 12px 24px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
overflow: visible !important;
box-sizing: border-box !important;
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
}
/* Brand: never shrink */
.top-nav .brand-wrap{
flex: 0 0 auto !important;
flex-shrink: 0 !important;
margin-right: 0 !important;
}
/* Middle nav: flex 1, centered */
.top-nav .top-nav-extra{
flex: 1 1 auto !important;
min-width: 0 !important;
justify-content: center !important;
display: flex !important;
}
@media (max-width: 768px){
.top-nav .top-nav-extra{ display: none !important; }
}
/* Right user area: pinned right, never shrink */
.top-nav > .flex.items-center.gap-2,
.top-nav > div:last-child{
flex: 0 0 auto !important;
flex-shrink: 0 !important;
margin-left: auto !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
}
/* Inner pills — never compressed */
.top-nav .topnav-balance,
.top-nav .topnav-bell,
.top-nav .topnav-avatar-wrap,
.top-nav .topnav-btn-login,
.top-nav .topnav-btn-register,
.top-nav #topnav-auth-out,
.top-nav #topnav-auth-in{
flex-shrink: 0 !important;
white-space: nowrap !important;
}
/* Compact balance pill at narrow widths */
@media (max-width: 1024px){
.top-nav .topnav-balance{ font-size: 12px !important; padding: 5px 10px !important; }
}
@media (max-width: 768px){
.top-nav{ padding: 10px 14px !important; gap: 8px !important; }
.top-nav .topnav-balance span{ display: inline !important; }
}
/* Body overflow does not clip nav */
/* ════════════════════════════════════════════════════
Desktop navbar — fit balance/bell/avatar inside (2026-05-27)
════════════════════════════════════════════════════ */
.top-nav{
width: 100% !important;
max-width: 1440px !important;
margin: 0 auto !important;
padding: 12px 24px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
overflow: visible !important;
box-sizing: border-box !important;
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
}
/* Brand: never shrink */
.top-nav .brand-wrap{
flex: 0 0 auto !important;
flex-shrink: 0 !important;
margin-right: 0 !important;
}
/* Middle nav: flex 1, centered */
.top-nav .top-nav-extra{
flex: 1 1 auto !important;
min-width: 0 !important;
justify-content: center !important;
}
@media (min-width: 769px){
.top-nav .top-nav-extra{ display: flex !important; }
}
@media (max-width: 768px){
.top-nav .top-nav-extra{ display: none !important; }
}
/* Right user area: pinned right, never shrink */
.top-nav > .flex.items-center.gap-2,
.top-nav > div:last-child{
flex: 0 0 auto !important;
flex-shrink: 0 !important;
margin-left: auto !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
}
/* Inner pills — never compressed */
.top-nav .topnav-balance,
.top-nav .topnav-bell,
.top-nav .topnav-avatar-wrap,
.top-nav .topnav-btn-login,
.top-nav .topnav-btn-register,
.top-nav #topnav-auth-out,
.top-nav #topnav-auth-in{
flex-shrink: 0 !important;
white-space: nowrap !important;
}
/* Compact balance pill at narrow widths */
@media (max-width: 1024px){
.top-nav .topnav-balance{ font-size: 12px !important; padding: 5px 10px !important; }
}
@media (max-width: 768px){
.top-nav{ padding: 10px 14px !important; gap: 8px !important; }
}
/* Body overflow doesn't clip nav */
body{ overflow-x: hidden !important; }
header.top-nav{ overflow: visible !important; }
/* Profile v3 — auto-fit height (2026-05-27 night) */
#modal-profile .pf-v3{
height: auto !important;
min-height: 0 !important;
max-height: 92dvh !important;
}
@supports not (max-height: 92dvh){
#modal-profile .pf-v3{ max-height: 92vh !important; }
}
/* Body scrolls only when content exceeds max-height — flex shrinks naturally */
#modal-profile .pf3-body{
flex: 0 1 auto !important;
overflow-y: auto !important;
min-height: 0 !important;
padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
}
/* ════════════════════════════════════════════════════
Mobile navbar — hamburger + bottom-nav as primary nav (2026-05-27)
════════════════════════════════════════════════════ */
@media (max-width: 768px){
/* Show hamburger on mobile, hide nav menu */
.top-nav .hamburger{
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 36px !important;
border-radius: 8px !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
color: #cbd5e1 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
margin-right: 4px !important;
}
.top-nav .hamburger:hover{
background: rgba(255,255,255,0.08) !important;
color: #fff !important;
}
.top-nav .top-nav-extra{ display: none !important; }
/* Logo smaller on mobile so hamburger + logo + user-area all fit */
.top-nav .brand-logo{
height: 32px !important;
min-width: 120px !important;
max-width: 150px !important;
}
/* Tighten user area buttons */
.top-nav .topnav-balance{
font-size: 11.5px !important;
padding: 4px 8px !important;
gap: 4px !important;
}
.top-nav .topnav-bell,
.top-nav .topnav-avatar{
width: 32px !important;
height: 32px !important;
}
}
@media (min-width: 769px){
/* Desktop: hide hamburger (bottom-nav already hidden on desktop) */
.top-nav .hamburger{ display: none !important; }
}
/* ════════════════════════════════════════════════════
Auth v3 (bottom-sheet) — re-added to source 2026-05-27
Restores #160 cleaner login layout
════════════════════════════════════════════════════ */
#modal-auth.modal-backdrop{ align-items: flex-end !important; }
.auth-v3{
width: 100% !important;
max-width: 480px !important;
margin: 0 auto !important;
background: linear-gradient(180deg, #13202E 0%, #0E1621 100%) !important;
border: 1px solid #1e2e40 !important;
border-radius: 22px 22px 0 0 !important;
padding: 12px 22px calc(env(safe-area-inset-bottom, 0px) + 18px) 22px !important;
position: relative !important;
box-shadow: 0 -8px 40px rgba(0,0,0,0.6) !important;
max-height: calc(100dvh - 80px) !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 600px){
.auth-v3{ border-radius: 22px !important; margin: auto !important; }
#modal-auth.modal-backdrop{ align-items: center !important; }
}
.auth-v3-handle{
width: 40px; height: 4px;
background: #475569;
border-radius: 4px;
margin: 0 auto 12px;
opacity: 0.6;
}
.auth-v3-close{
position: absolute; top: 14px; right: 14px;
width: 30px; height: 30px;
background: rgba(148,163,184,0.15);
border: none; border-radius: 50%;
color: #cbd5e1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
z-index: 2;
}
.auth-v3-close:hover{ background: rgba(148,163,184,0.25); }
.auth-v3-brand{ text-align: center; padding: 4px 0 16px; }
.auth-v3-mascot{
width: 88px; height: 88px;
margin: 0 auto 8px;
border-radius: 50%;
background: radial-gradient(circle, rgba(251,191,36,0.25) 0%, transparent 70%);
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--gold, #fbbf24);
box-shadow: 0 4px 24px rgba(251,191,36,0.4);
overflow: hidden;
}
.auth-v3-mascot img{
width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
background: #fff;
}
.auth-v3-title{
font-size: 26px; font-weight: 900; letter-spacing: 2.5px;
background: linear-gradient(90deg, #ef4444 0%, #fbbf24 50%, #ef4444 100%);
background-size: 200% auto;
animation: bs-gold-flow 3s linear infinite;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
margin-top: 4px;
}
.auth-v3-tag{
font-size: 11px; letter-spacing: 3px; font-weight: 800;
color: var(--gold, #fbbf24);
margin-top: 4px;
}
.auth-v3-tabs{
display: flex; gap: 0;
margin-bottom: 16px;
background: rgba(15,22,33,0.6);
border: 1px solid #1e2e40;
border-radius: 10px;
padding: 4px;
}
.auth-v3-tab{
flex: 1;
padding: 9px 12px;
background: transparent;
border: none;
color: #94a3b8;
font-size: 13px; font-weight: 700;
border-radius: 8px;
cursor: pointer;
letter-spacing: 0.5px;
transition: background 0.2s ease, color 0.2s ease;
}
.auth-v3-tab:hover{ color: #cbd5e1; }
.auth-v3-tab.active{
background: #0B1320;
color: #ffffff;
box-shadow: inset 0 0 0 1px #1e2e40;
}
.auth-v3-form{ display: flex; flex-direction: column; gap: 12px; }
.auth-v3-form.hidden{ display: none; }
.auth-v3-field{ position: relative; }
.auth-v3-input{
width: 100%;
padding: 14px 16px !important;
font-size: 14px !important;
background: rgba(15,22,33,0.8) !important;
border: 1px solid #1e2e40 !important;
border-radius: 10px !important;
color: #e2e8f0 !important;
}
.auth-v3-input::placeholder{ color: #64748b; }
.auth-v3-input:focus{
border-color: var(--gold, #fbbf24) !important;
outline: none;
background: rgba(15,22,33,1) !important;
}
.auth-v3-phone{
display: flex !important; align-items: stretch !important;
border: 1px solid #1e2e40 !important;
border-radius: 10px !important; overflow: hidden !important;
background: rgba(15,22,33,0.8) !important;
}
.auth-v3-phone-prefix{
padding: 14px 12px;
background: rgba(15,22,33,1);
color: #94a3b8;
font-size: 14px; font-weight: 700;
border-right: 1px solid #1e2e40;
}
.auth-v3-phone .auth-v3-input{
border: none !important; border-radius: 0 !important;
background: transparent !important;
}
.auth-v3-eye{
position: absolute; right: 12px; top: 50%;
transform: translateY(-50%);
background: transparent; border: 0;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
color: #94a3b8; cursor: pointer;
}
.auth-v3-eye svg{ width: 18px; height: 18px; }
.auth-v3-otp-btn{
padding: 0 14px;
background: rgba(59,130,246,0.18);
border: 1px solid #3b82f6;
border-radius: 10px;
color: #60a5fa;
font-size: 12px; font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.auth-v3-cta{
width: 100%;
padding: 15px 20px;
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
border: none; border-radius: 12px;
color: #0E1621;
font-size: 16px; font-weight: 900;
letter-spacing: 0.3px;
cursor: pointer;
margin-top: 8px;
box-shadow: 0 6px 24px rgba(251,191,36,0.35);
position: sticky;
bottom: 0;
z-index: 3;
}
.auth-v3-form::after{
content: "";
position: sticky;
bottom: -1px;
display: block;
height: 1px;
margin-top: -1px;
}
.auth-v3-cta:hover{ filter: brightness(1.05); }
.auth-v3-cta:active{ transform: translateY(1px); }
.auth-v3-foot{
text-align: center;
margin-top: 10px;
font-size: 12px; color: #94a3b8;
}
.auth-v3-link{
color: var(--gold, #fbbf24);
font-weight: 700;
text-decoration: underline;
cursor: pointer;
margin-left: 4px;
}
.auth-v3-hint{
font-size: 10px; color: #64748b; margin-top: 4px;
}
/* ════════════════════════════════════════════════════
Auth v3 — specificity-bump override (2026-05-27 fix)
Old .modal / .auth-card / generic img rules were winning;
prefix every rule with #modal-auth and !important critical sizes
════════════════════════════════════════════════════ */
#modal-auth .auth-v3{
max-width: 480px !important;
width: calc(100% - 32px) !important;
padding: 12px 22px 26px 22px !important;
background: linear-gradient(180deg, #13202E 0%, #0E1621 100%) !important;
border: 1px solid #1e2e40 !important;
border-radius: 22px !important;
margin: auto !important;
box-sizing: border-box !important;
}
#modal-auth.modal-backdrop.show{
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 16px !important;
}
@media (max-width: 600px){
#modal-auth.modal-backdrop.show{ align-items: flex-end !important; padding: 0 !important; }
#modal-auth .auth-v3{
width: 100% !important;
border-radius: 22px 22px 0 0 !important;
margin: 0 auto !important;
}
}
/* Mascot — hard size lock */
#modal-auth .auth-v3 .auth-v3-mascot{
width: 88px !important;
height: 88px !important;
min-width: 88px !important;
max-width: 88px !important;
min-height: 88px !important;
max-height: 88px !important;
margin: 0 auto 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
overflow: hidden !important;
border: 2px solid #fbbf24 !important;
box-shadow: 0 4px 24px rgba(251,191,36,0.4) !important;
background: #fff !important;
}
#modal-auth .auth-v3 .auth-v3-mascot img{
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
border-radius: 50% !important;
display: block !important;
}
/* Tabs */
#modal-auth .auth-v3 .auth-v3-tabs{
display: flex !important;
gap: 0 !important;
margin-bottom: 16px !important;
background: rgba(15,22,33,0.6) !important;
border: 1px solid #1e2e40 !important;
border-radius: 10px !important;
padding: 4px !important;
}
#modal-auth .auth-v3 .auth-v3-tab{
flex: 1 !important;
padding: 9px 12px !important;
background: transparent !important;
border: none !important;
color: #94a3b8 !important;
font-size: 13px !important;
font-weight: 700 !important;
border-radius: 8px !important;
cursor: pointer !important;
letter-spacing: 0.5px !important;
}
#modal-auth .auth-v3 .auth-v3-tab.active{
background: rgba(251,191,36,0.12) !important;
color: #fbbf24 !important;
}
/* CTA button (gold) */
#modal-auth .auth-v3 .auth-v3-cta{
width: 100% !important;
padding: 15px 20px !important;
background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%) !important;
border: none !important;
border-radius: 12px !important;
color: #0E1621 !important;
font-size: 16px !important;
font-weight: 900 !important;
letter-spacing: 0.3px !important;
cursor: pointer !important;
margin-top: 4px !important;
box-shadow: 0 6px 24px rgba(251,191,36,0.35) !important;
display: block !important;
}
/* Brand */
#modal-auth .auth-v3 .auth-v3-brand{ text-align: center !important; padding: 4px 0 16px !important; }
#modal-auth .auth-v3 .auth-v3-title{
font-size: 26px !important;
font-weight: 900 !important;
letter-spacing: 2.5px !important;
background: linear-gradient(90deg, #ef4444 0%, #fbbf24 50%, #ef4444 100%) !important;
background-size: 200% auto !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin-top: 4px !important;
}
#modal-auth .auth-v3 .auth-v3-tag{
font-size: 11px !important;
letter-spacing: 3px !important;
font-weight: 800 !important;
color: #fbbf24 !important;
margin-top: 4px !important;
}
/* Inputs */
#modal-auth .auth-v3 .auth-v3-input{
width: 100% !important;
padding: 14px 16px !important;
font-size: 14px !important;
background: rgba(15,22,33,0.8) !important;
border: 1px solid #1e2e40 !important;
border-radius: 10px !important;
color: #e2e8f0 !important;
box-sizing: border-box !important;
}
#modal-auth .auth-v3 .auth-v3-form{ display: flex !important; flex-direction: column !important; gap: 12px !important; }
#modal-auth .auth-v3 .auth-v3-form.hidden{ display: none !important; }
/* Hide old f96-auth artifacts that JS may inject */
#modal-auth #mlogin-forgot-link,
#modal-auth .f96-auth,
#modal-auth .f96a-switch,
#modal-auth .f96a-tag{ display: none !important; }
/* ════════════════════════════════════════════════════
Auth v3 — close-X position + click fix (2026-05-27)
════════════════════════════════════════════════════ */
#modal-auth .auth-v3{
position: relative !important; /* anchor for absolute children */
overflow: visible !important;
}
#modal-auth .auth-v3 .auth-v3-close{
position: absolute !important;
top: 12px !important;
right: 12px !important;
width: 32px !important;
height: 32px !important;
background: rgba(148,163,184,0.18) !important;
border: none !important;
border-radius: 50% !important;
color: #cbd5e1 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 10 !important;
pointer-events: auto !important;
padding: 0 !important;
}
#modal-auth .auth-v3 .auth-v3-close:hover{
background: rgba(148,163,184,0.32) !important;
color: #fff !important;
}
#modal-auth .auth-v3 .auth-v3-close svg{
width: 14px !important; height: 14px !important;
pointer-events: none !important; /* let parent button receive click */
}
/* Drag handle should not block clicks either */
#modal-auth .auth-v3 .auth-v3-handle{
pointer-events: none !important;
}
/* ════════════════════════════════════════════════════
Profile v3 — eye toggle + small button polish (2026-05-27)
════════════════════════════════════════════════════ */
#modal-profile .pf3-eye{
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 8px !important;
color: #94a3b8 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
#modal-profile .pf3-eye svg{
width: 18px !important;
height: 18px !important;
pointer-events: none !important;
}
#modal-profile .pf3-eye:hover{ background: rgba(148,163,184,0.12) !important; color: #cbd5e1 !important; }
/* Bal-top: align eye with label */
#modal-profile .pf3-bal-top{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
/* ════════════════════════════════════════════════════
Auth v3 — bottom-sheet scroll + sticky CTA fix (2026-05-27 night)
Outranks earlier specificity-bump (overflow: visible) and tab colors.
Use `body` prefix to bump specificity above #modal-auth .auth-v3.
════════════════════════════════════════════════════ */
body #modal-auth .auth-v3{
max-height: calc(100dvh - 80px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch;
padding: 12px 22px calc(env(safe-area-inset-bottom, 0px) + 20px) 22px !important;
}
@supports not (max-height: calc(100dvh - 80px)){
body #modal-auth .auth-v3{ max-height: calc(100vh - 80px) !important; }
}
/* Tabs — active = dark bg + white text; inactive = transparent + gray */
body #modal-auth .auth-v3 .auth-v3-tab{
background: transparent !important;
color: #94a3b8 !important;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}
body #modal-auth .auth-v3 .auth-v3-tab:hover{ color: #cbd5e1 !important; }
body #modal-auth .auth-v3 .auth-v3-tab.active{
background: #0B1320 !important;
color: #ffffff !important;
box-shadow: inset 0 0 0 1px #1e2e40 !important;
}
/* CTA sticky at bottom of scrolling modal */
body #modal-auth .auth-v3 .auth-v3-cta{
position: sticky !important;
bottom: 0 !important;
z-index: 3 !important;
margin-top: 8px !important;
}
/* Tabs sticky at top so tab switch is always reachable when scrolled */
body #modal-auth .auth-v3 .auth-v3-tabs{
position: sticky !important;
top: 0 !important;
z-index: 4 !important;
background: linear-gradient(180deg, #13202E 0%, #13202E 92%, rgba(19,32,46,0) 100%) !important;
padding-top: 4px !important;
padding-bottom: 8px !important;
margin-left: -4px !important;
margin-right: -4px !important;
border-radius: 0 !important;
border: 0 !important;
}
body #modal-auth .auth-v3 .auth-v3-tabs::before{
content: ""; position: absolute; inset: -2px 0 0 0;
background: #13202E;
z-index: -1;
}
/* ================================================================
Auth v3 - Premium Minimal redesign (2026-05-27 night, Mz approved)
FINAL OVERRIDE - html body prefix outranks all prior auth-v3 rules.
No markup changes; icons via inline SVG data-URI on .auth-v3-field
================================================================ */
/* Container */
html body #modal-auth.modal-backdrop.show{
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
padding: 0 !important;
background: rgba(2, 8, 16, 0.72) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
@media (min-width: 600px){
html body #modal-auth.modal-backdrop.show{
align-items: center !important;
padding: 24px !important;
}
}
html body #modal-auth .auth-v3{
width: 100% !important;
max-width: 440px !important;
margin: 0 auto !important;
background: #0F1A26 !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 24px 24px 0 0 !important;
padding: 14px 24px calc(env(safe-area-inset-bottom, 0px) + 24px) 24px !important;
position: relative !important;
box-shadow: 0 -16px 60px rgba(0,0,0,0.7) !important;
max-height: calc(100dvh - 60px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch;
box-sizing: border-box !important;
}
@media (min-width: 600px){
html body #modal-auth .auth-v3{
border-radius: 24px !important;
border: 1px solid rgba(255,255,255,0.08) !important;
max-height: min(640px, calc(100dvh - 48px)) !important;
}
}
@supports not (max-height: calc(100dvh - 60px)){
html body #modal-auth .auth-v3{ max-height: calc(100vh - 60px) !important; }
}
/* Drag handle */
html body #modal-auth .auth-v3 .auth-v3-handle{
width: 44px !important;
height: 4px !important;
background: rgba(148,163,184,0.35) !important;
border-radius: 999px !important;
margin: 0 auto 18px !important;
opacity: 1 !important;
}
@media (min-width: 600px){
html body #modal-auth .auth-v3 .auth-v3-handle{ display: none !important; }
}
/* Close X */
html body #modal-auth .auth-v3 .auth-v3-close{
position: absolute !important;
top: 16px !important;
right: 16px !important;
width: 36px !important;
height: 36px !important;
background: rgba(148,163,184,0.10) !important;
border: none !important;
border-radius: 50% !important;
color: #cbd5e1 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 5 !important;
transition: background 0.18s ease !important;
}
html body #modal-auth .auth-v3 .auth-v3-close:hover{
background: rgba(148,163,184,0.20) !important;
}
html body #modal-auth .auth-v3 .auth-v3-close svg{ pointer-events: none; }
/* Brand block */
html body #modal-auth .auth-v3 .auth-v3-brand{
text-align: center !important;
padding: 8px 0 26px !important;
margin: 0 !important;
}
html body #modal-auth .auth-v3 .auth-v3-mascot{ display: none !important; }
html body #modal-auth .auth-v3 .auth-v3-title{
font-size: 30px !important;
font-weight: 900 !important;
letter-spacing: 6px !important;
background: linear-gradient(90deg, #EF4444 0%, #FBBF24 50%, #EF4444 100%) !important;
background-size: 200% auto !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
color: transparent !important;
margin: 0 0 8px 0 !important;
line-height: 1 !important;
animation: bs-gold-flow 4s linear infinite !important;
}
html body #modal-auth .auth-v3 .auth-v3-tag{
font-size: 10px !important;
letter-spacing: 4px !important;
font-weight: 700 !important;
color: rgba(251,191,36,0.85) !important;
margin: 0 !important;
text-transform: uppercase !important;
}
/* Tabs - full-width segmented pill */
html body #modal-auth .auth-v3 .auth-v3-tabs{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
margin: 0 0 22px 0 !important;
padding: 4px !important;
background: #0A1320 !important;
border: 1px solid rgba(255,255,255,0.05) !important;
border-radius: 12px !important;
position: relative !important;
width: 100% !important;
box-sizing: border-box !important;
}
html body #modal-auth .auth-v3 .auth-v3-tab{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 11px 12px !important;
background: transparent !important;
border: none !important;
color: #64748B !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
border-radius: 9px !important;
cursor: pointer !important;
transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
outline: none !important;
}
html body #modal-auth .auth-v3 .auth-v3-tab:hover{ color: #cbd5e1 !important; }
html body #modal-auth .auth-v3 .auth-v3-tab.active{
background: #1B2A3E !important;
color: #ffffff !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 12px rgba(0,0,0,0.25) !important;
}
/* Form */
html body #modal-auth .auth-v3 .auth-v3-form{
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
html body #modal-auth .auth-v3 .auth-v3-form.hidden{ display: none !important; }
/* Field wrapper + input */
html body #modal-auth .auth-v3 .auth-v3-field{
position: relative !important;
margin: 0 !important;
}
html body #modal-auth .auth-v3 .auth-v3-input{
width: 100% !important;
height: 52px !important;
padding: 0 16px 0 46px !important;
font-size: 14px !important;
background: #0A1320 !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 12px !important;
color: #E2E8F0 !important;
box-sizing: border-box !important;
transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
-webkit-appearance: none !important;
appearance: none !important;
}
html body #modal-auth .auth-v3 .auth-v3-input::placeholder{
color: #475569 !important;
font-weight: 500 !important;
}
html body #modal-auth .auth-v3 .auth-v3-input:focus{
outline: none !important;
border-color: rgba(251,191,36,0.55) !important;
background: #0E1827 !important;
box-shadow: 0 0 0 3px rgba(251,191,36,0.10) !important;
}
html body #modal-auth .auth-v3 .auth-v3-input:-webkit-autofill,
html body #modal-auth .auth-v3 .auth-v3-input:-webkit-autofill:focus{
-webkit-text-fill-color: #E2E8F0 !important;
-webkit-box-shadow: 0 0 0 1000px #0A1320 inset !important;
caret-color: #E2E8F0 !important;
}
/* Left icon - user (default), lock for password, phone for tel */
html body #modal-auth .auth-v3 .auth-v3-field::before{
content: "";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
opacity: 0.55;
pointer-events: none;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
}
html body #modal-auth .auth-v3 .auth-v3-field:has(input[type="password"])::before{
background-image: url("data:image/svg+xml;utf8,");
}
html body #modal-auth .auth-v3 .auth-v3-field:has(input[type="tel"])::before,
html body #modal-auth .auth-v3 .auth-v3-field:has(.auth-v3-phone)::before{
background-image: url("data:image/svg+xml;utf8,");
}
/* Phone with prefix +61 */
html body #modal-auth .auth-v3 .auth-v3-field:has(.auth-v3-phone){ padding: 0 !important; }
html body #modal-auth .auth-v3 .auth-v3-phone{
display: flex !important;
align-items: stretch !important;
background: #0A1320 !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 12px !important;
overflow: hidden !important;
height: 52px !important;
transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}
html body #modal-auth .auth-v3 .auth-v3-phone:focus-within{
border-color: rgba(251,191,36,0.55) !important;
background: #0E1827 !important;
box-shadow: 0 0 0 3px rgba(251,191,36,0.10) !important;
}
html body #modal-auth .auth-v3 .auth-v3-phone-prefix{
padding: 0 14px 0 46px !important;
display: inline-flex !important;
align-items: center !important;
color: #cbd5e1 !important;
font-size: 14px !important;
font-weight: 700 !important;
border-right: 1px solid rgba(255,255,255,0.06) !important;
background: transparent !important;
letter-spacing: 0.3px !important;
}
html body #modal-auth .auth-v3 .auth-v3-phone .auth-v3-input{
border: none !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 16px !important;
height: 100% !important;
flex: 1 !important;
box-shadow: none !important;
}
html body #modal-auth .auth-v3 .auth-v3-phone .auth-v3-input:focus{
background: transparent !important;
box-shadow: none !important;
}
/* OTP Send button */
html body #modal-auth .auth-v3 .auth-v3-otp-btn{
padding: 0 16px !important;
height: 52px !important;
background: rgba(59,130,246,0.10) !important;
border: 1px solid rgba(59,130,246,0.40) !important;
border-radius: 10px !important;
color: #60A5FA !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.4px !important;
cursor: pointer !important;
white-space: nowrap !important;
transition: background 0.18s ease !important;
}
html body #modal-auth .auth-v3 .auth-v3-otp-btn:hover{
background: rgba(59,130,246,0.18) !important;
}
/* Eye toggle */
html body #modal-auth .auth-v3 .auth-v3-eye{
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important;
border: 0 !important;
width: 36px !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #94a3b8 !important;
cursor: pointer !important;
border-radius: 8px !important;
transition: color 0.18s ease, background 0.18s ease !important;
padding: 0 !important;
z-index: 2 !important;
}
html body #modal-auth .auth-v3 .auth-v3-eye:hover{
color: #E2E8F0 !important;
background: rgba(148,163,184,0.10) !important;
}
html body #modal-auth .auth-v3 .auth-v3-eye svg{
width: 18px !important;
height: 18px !important;
pointer-events: none !important;
}
/* CTA - solid gold, soft shadow */
html body #modal-auth .auth-v3 .auth-v3-cta{
width: 100% !important;
height: 54px !important;
padding: 0 20px !important;
margin: 18px 0 0 0 !important;
background: linear-gradient(180deg, #FCD34D 0%, #F59E0B 100%) !important;
border: none !important;
border-radius: 14px !important;
color: #0E1621 !important;
font-size: 16px !important;
font-weight: 900 !important;
letter-spacing: 0.3px !important;
cursor: pointer !important;
box-shadow: 0 10px 28px -10px rgba(251,191,36,0.55), inset 0 1px 0 rgba(255,255,255,0.30) !important;
transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
position: sticky !important;
bottom: 0 !important;
z-index: 3 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
html body #modal-auth .auth-v3 .auth-v3-cta:hover{
filter: brightness(1.04) !important;
box-shadow: 0 12px 32px -10px rgba(251,191,36,0.65), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
html body #modal-auth .auth-v3 .auth-v3-cta:active{
transform: translateY(1px) !important;
box-shadow: 0 6px 18px -8px rgba(251,191,36,0.45), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
/* Foot link */
html body #modal-auth .auth-v3 .auth-v3-foot{
text-align: center !important;
margin-top: 14px !important;
font-size: 13px !important;
color: #94a3b8 !important;
}
html body #modal-auth .auth-v3 .auth-v3-link{
color: #FBBF24 !important;
font-weight: 700 !important;
text-decoration: none !important;
cursor: pointer !important;
letter-spacing: 0.2px !important;
}
html body #modal-auth .auth-v3 .auth-v3-link:hover{
text-decoration: underline !important;
}
/* Hint text */
html body #modal-auth .auth-v3 .auth-v3-hint{
font-size: 11px !important;
color: #64748B !important;
margin: 6px 0 0 4px !important;
line-height: 1.4 !important;
}
/* Turnstile container - minimal */
html body #modal-auth .auth-v3 .auth-v3-field:has(> [id^="ts-"]){
background: transparent !important;
border: none !important;
min-height: 0 !important;
padding: 0 !important;
margin: 4px 0 0 0 !important;
}
html body #modal-auth .auth-v3 .auth-v3-field:has(> [id^="ts-"])::before{ display: none !important; }
/* Hide legacy artifacts */
html body #modal-auth .f96-auth,
html body #modal-auth .f96a-switch,
html body #modal-auth .f96a-tag,
html body #modal-auth .auth-v3-mascot{ display: none !important; }
/* Auth v3 — CMS logo img + per-panel title/subtitle (2026-05-27 night) */
html body #modal-auth .auth-v3 .auth-v3-logo{
display: block;
max-width: 180px !important;
max-height: 56px !important;
width: auto !important;
height: auto !important;
margin: 0 auto 10px !important;
object-fit: contain !important;
background: transparent !important;
}
html body #modal-auth .auth-v3 .auth-v3-panel-head{
text-align: center !important;
margin: 0 0 16px 0 !important;
padding: 0 4px !important;
}
html body #modal-auth .auth-v3 .auth-v3-panel-title{
font-size: 17px !important;
font-weight: 800 !important;
color: #FBBF24 !important;
letter-spacing: 0.3px !important;
margin: 0 0 6px 0 !important;
line-height: 1.3 !important;
}
html body #modal-auth .auth-v3 .auth-v3-panel-sub{
font-size: 12px !important;
font-weight: 500 !important;
color: #cbd5e1 !important;
line-height: 1.55 !important;
letter-spacing: 0.1px !important;
margin: 0 !important;
}
/* ================================================================
Auth v3 — Mz exact spec override (2026-05-27 night)
Tweaks Premium Minimal to Mz's preferred dimensions/colors.
Same prefix as prior block — last-declared wins at equal specificity.
================================================================ */
/* Modal container — bg, padding, max-height */
html body #modal-auth .auth-v3{
background: #0E1621 !important;
padding: 14px 18px calc(env(safe-area-inset-bottom, 0px) + 18px) 18px !important;
max-height: 92dvh !important;
overflow-y: auto !important;
border-radius: 20px 20px 0 0 !important;
}
@media (min-width: 600px){
html body #modal-auth .auth-v3{
border-radius: 20px !important;
max-height: min(640px, 92dvh) !important;
}
}
@supports not (max-height: 92dvh){
html body #modal-auth .auth-v3{ max-height: 92vh !important; }
}
/* Drag handle — 36 wide, top margin 10 */
html body #modal-auth .auth-v3 .auth-v3-handle{
width: 36px !important;
height: 4px !important;
background: #475569 !important;
border-radius: 4px !important;
margin: 10px auto 14px !important;
opacity: 0.75 !important;
}
/* Tabs container — #13202E + radius 10 + padding 3 */
html body #modal-auth .auth-v3 .auth-v3-tabs{
background: #13202E !important;
border-radius: 10px !important;
padding: 3px !important;
border: none !important;
margin: 0 0 18px 0 !important;
}
/* Inactive tab — transparent + #445 */
html body #modal-auth .auth-v3 .auth-v3-tab{
background: transparent !important;
color: #445566 !important;
font-weight: 500 !important;
font-size: 14px !important;
border-radius: 8px !important;
padding: 10px 12px !important;
box-shadow: none !important;
}
html body #modal-auth .auth-v3 .auth-v3-tab:hover{ color: #6b7c91 !important; }
/* Active tab — orange #F5A623 + dark text */
html body #modal-auth .auth-v3 .auth-v3-tab.active{
background: #F5A623 !important;
color: #1a0a00 !important;
border-radius: 8px !important;
font-weight: 500 !important;
box-shadow: 0 2px 8px rgba(245,166,35,0.25) !important;
}
/* Inputs — 48px height, #13202E bg, 0.5px border, radius 10, #aaa text */
html body #modal-auth .auth-v3 .auth-v3-input{
height: 48px !important;
background: #13202E !important;
border: 0.5px solid #1e2e40 !important;
border-radius: 10px !important;
padding: 0 14px 0 42px !important;
font-size: 14px !important;
color: #aaaaaa !important;
}
html body #modal-auth .auth-v3 .auth-v3-input::placeholder{
color: #334455 !important;
font-weight: 400 !important;
}
html body #modal-auth .auth-v3 .auth-v3-input:focus{
border-color: rgba(245,166,35,0.55) !important;
background: #15243A !important;
box-shadow: 0 0 0 2px rgba(245,166,35,0.10) !important;
}
html body #modal-auth .auth-v3 .auth-v3-input:-webkit-autofill,
html body #modal-auth .auth-v3 .auth-v3-input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0 1000px #13202E inset !important;
-webkit-text-fill-color: #aaaaaa !important;
}
/* Field icon — adjust left/size to match 48px input */
html body #modal-auth .auth-v3 .auth-v3-field::before{
left: 14px !important;
width: 16px !important;
height: 16px !important;
background-size: 16px 16px !important;
opacity: 0.45 !important;
}
/* Form field gap — tighter to match 12px spec */
html body #modal-auth .auth-v3 .auth-v3-form{ gap: 12px !important; }
/* Phone input row — match 48px height */
html body #modal-auth .auth-v3 .auth-v3-phone{
height: 48px !important;
background: #13202E !important;
border: 0.5px solid #1e2e40 !important;
border-radius: 10px !important;
}
html body #modal-auth .auth-v3 .auth-v3-phone:focus-within{
border-color: rgba(245,166,35,0.55) !important;
background: #15243A !important;
box-shadow: 0 0 0 2px rgba(245,166,35,0.10) !important;
}
html body #modal-auth .auth-v3 .auth-v3-phone-prefix{
padding: 0 12px 0 42px !important;
color: #aaaaaa !important;
border-right: 0.5px solid #1e2e40 !important;
}
/* OTP send button — match 48px */
html body #modal-auth .auth-v3 .auth-v3-otp-btn{
height: 48px !important;
border-radius: 10px !important;
}
/* Eye toggle — 16px svg to match smaller inputs */
html body #modal-auth .auth-v3 .auth-v3-eye{
width: 32px !important;
height: 32px !important;
right: 8px !important;
}
html body #modal-auth .auth-v3 .auth-v3-eye svg{
width: 16px !important;
height: 16px !important;
}
/* CTA — solid #F5A623, padding 14, radius 10, font 15 weight 500 */
html body #modal-auth .auth-v3 .auth-v3-cta{
height: auto !important;
padding: 14px 20px !important;
background: #F5A623 !important;
border-radius: 10px !important;
font-size: 15px !important;
font-weight: 500 !important;
color: #1a0a00 !important;
margin: 8px 0 12px 0 !important;
box-shadow: 0 6px 18px -8px rgba(245,166,35,0.45) !important;
letter-spacing: 0.2px !important;
}
html body #modal-auth .auth-v3 .auth-v3-cta:hover{
filter: brightness(1.05) !important;
background: #F5A623 !important;
}
html body #modal-auth .auth-v3 .auth-v3-cta:active{
transform: translateY(1px) !important;
background: #E59812 !important;
}
/* Foot / Forgot password link */
html body #modal-auth .auth-v3 .auth-v3-foot{
text-align: center !important;
margin-top: 4px !important;
font-size: 13px !important;
}
html body #modal-auth .auth-v3 .auth-v3-link{
color: #F5A623 !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
}
/* Panel head — slightly tighter spacing for compact look */
html body #modal-auth .auth-v3 .auth-v3-panel-head{
margin: 0 0 14px 0 !important;
}
html body #modal-auth .auth-v3 .auth-v3-panel-title{
font-size: 16px !important;
color: #F5A623 !important;
}
html body #modal-auth .auth-v3 .auth-v3-panel-sub{
font-size: 12px !important;
color: #94a3b8 !important;
}
/* Brand block — tighter top padding to match compact spec */
html body #modal-auth .auth-v3 .auth-v3-brand{
padding: 4px 0 18px !important;
}
html body #modal-auth .auth-v3 .auth-v3-title{
font-size: 26px !important;
letter-spacing: 4px !important;
}
html body #modal-auth .auth-v3 .auth-v3-tag{
font-size: 10px !important;
letter-spacing: 3.5px !important;
}
/* Auth v3 — fill near-full sheet height on mobile (Mz 2026-05-27 night) */
@media (max-width: 600px){
html body #modal-auth .auth-v3{
min-height: 90dvh !important;
display: flex !important;
flex-direction: column !important;
}
@supports not (min-height: 90dvh){
html body #modal-auth .auth-v3{ min-height: 90vh !important; }
}
/* Active form takes remaining space — keeps CTA near bottom, brand near top */
html body #modal-auth .auth-v3 .auth-v3-form:not(.hidden){
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
}
/* CTA pinned to form bottom with margin-top auto */
html body #modal-auth .auth-v3 .auth-v3-form:not(.hidden) .auth-v3-cta{
margin-top: auto !important;
}
/* Slightly more breathing room above brand on tall modal */
html body #modal-auth .auth-v3 .auth-v3-brand{
padding: 8px 0 20px !important;
}
}
/* Auth v3 — force logo + tagline horizontal center (Mz 2026-05-27 night) */
html body #modal-auth .auth-v3 .auth-v3-brand{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
}
html body #modal-auth .auth-v3 .auth-v3-logo,
html body #modal-auth .auth-v3 .auth-v3-tag{
align-self: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ════════════════════════════════════════════════════════════════════
Auth v3 — FINAL SPEC (Mz approved 2026-05-27 night, board #N)
Selector: html body #modal-auth.modal-backdrop .auth-v3
Bumps specificity above ALL prior html body #modal-auth .auth-v3 rules.
This block is the single source of truth — earlier appends remain for
safety but are outranked here.
════════════════════════════════════════════════════════════════════ */
/* Backdrop */
html body #modal-auth.modal-backdrop.show{
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
padding: 0 !important;
background: rgba(2,8,16,0.72) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
@media (min-width: 600px){
html body #modal-auth.modal-backdrop.show{
align-items: center !important;
padding: 24px !important;
}
}
/* Container */
html body #modal-auth.modal-backdrop .auth-v3{
width: 100% !important;
max-width: 460px !important;
margin: 0 auto !important;
background: #0E1621 !important;
border: 1px solid rgba(255,255,255,0.04) !important;
border-radius: 20px 20px 0 0 !important;
padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 16px) 0 !important;
position: relative !important;
box-shadow: 0 -16px 60px rgba(0,0,0,0.7) !important;
max-height: 92dvh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
}
@media (min-width: 600px){
html body #modal-auth.modal-backdrop .auth-v3{
border-radius: 20px !important;
max-height: min(680px, 92dvh) !important;
}
}
@supports not (max-height: 92dvh){
html body #modal-auth.modal-backdrop .auth-v3{ max-height: 92vh !important; }
}
/* Drag handle */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-handle{
width: 36px !important;
height: 4px !important;
background: #2a3545 !important;
border-radius: 2px !important;
margin: 10px auto 0 !important;
display: block !important;
opacity: 1 !important;
}
/* Close X — fixed, doesn't scroll */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-close{
position: absolute !important;
top: 12px !important;
right: 12px !important;
width: 32px !important;
height: 32px !important;
background: rgba(148,163,184,0.10) !important;
border: none !important;
border-radius: 50% !important;
color: #cbd5e1 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 10 !important;
transition: background 0.18s ease !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-close:hover{
background: rgba(148,163,184,0.20) !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-close svg{ pointer-events: none !important; }
/* ─── Section 1: Hero (logo + tagline) ─── */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-brand{
padding: 20px 18px 16px !important;
text-align: center !important;
border-bottom: 0.5px solid #1a2535 !important;
background: transparent !important;
margin: 0 !important;
display: block !important;
flex: 0 0 auto !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-brand-inline{
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-logo{
display: block;
max-height: 44px !important;
height: 44px !important;
width: auto !important;
max-width: 200px !important;
object-fit: contain !important;
background: transparent !important;
margin: 0 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-wordmark{
font-size: 20px !important;
font-weight: 500 !important;
color: #F5A623 !important;
letter-spacing: 1px !important;
line-height: 1 !important;
margin: 0 !important;
-webkit-text-fill-color: #F5A623 !important;
background: none !important;
animation: none !important;
}
/* When logo image visible, hide text wordmark (applier shows/hides) */
/* (control via JS toggling display) */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tag{
font-size: 10px !important;
color: #334455 !important;
letter-spacing: 0.18em !important;
margin-top: 4px !important;
text-align: center !important;
font-weight: 600 !important;
text-transform: uppercase !important;
background: transparent !important;
-webkit-text-fill-color: #334455 !important;
}
/* Hide legacy title element if still present */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-title{ display: none !important; }
/* ─── Section 2: Tabs ─── */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tabs{
margin: 14px 18px 0 !important;
background: #13202E !important;
border-radius: 10px !important;
padding: 3px !important;
display: flex !important;
gap: 3px !important;
border: none !important;
grid-template-columns: none !important;
width: auto !important;
box-sizing: border-box !important;
position: static !important;
flex: 0 0 auto !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tabs::before{ display: none !important; }
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tab{
flex: 1 !important;
padding: 9px 0 !important;
background: transparent !important;
color: #334455 !important;
font-size: 13px !important;
font-weight: 500 !important;
border-radius: 8px !important;
border: none !important;
cursor: pointer !important;
letter-spacing: 0.2px !important;
transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
box-shadow: none !important;
outline: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tab:hover{
color: #66798f !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tab.active{
background: #F5A623 !important;
color: #1a0a00 !important;
font-weight: 500 !important;
box-shadow: 0 2px 8px rgba(245,166,35,0.25) !important;
}
/* ─── Section 3: Form content area ─── */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-form{
padding: 14px 18px 18px !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
flex: 1 1 auto !important;
margin: 0 !important;
min-height: 0 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-form.hidden{ display: none !important; }
/* Panel head — CMS title/subtitle */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-panel-head{
text-align: center !important;
margin: 0 0 14px 0 !important;
padding: 0 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-panel-title{
font-size: 15px !important;
font-weight: 500 !important;
color: #F5A623 !important;
margin: 0 0 3px 0 !important;
line-height: 1.3 !important;
letter-spacing: 0.2px !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-panel-sub{
font-size: 11px !important;
color: #334455 !important;
line-height: 1.5 !important;
margin: 0 !important;
font-weight: 500 !important;
}
/* Field wrapper + input */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-field{
position: relative !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-input{
width: 100% !important;
height: 46px !important;
padding: 0 14px 0 42px !important;
font-size: 13px !important;
background: #13202E !important;
border: 0.5px solid #1e2e40 !important;
border-radius: 10px !important;
color: #aaaaaa !important;
box-sizing: border-box !important;
transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
-webkit-appearance: none !important;
appearance: none !important;
font-weight: 400 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-input::placeholder{
color: #334455 !important;
font-weight: 400 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-input:focus{
outline: none !important;
border-color: #F5A623 !important;
background: #15243A !important;
box-shadow: 0 0 0 2px rgba(245,166,35,0.10) !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-input:-webkit-autofill,
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-input:-webkit-autofill:focus{
-webkit-text-fill-color: #aaaaaa !important;
-webkit-box-shadow: 0 0 0 1000px #13202E inset !important;
caret-color: #aaaaaa !important;
}
/* Left icon — user (default), lock for password, phone for tel */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-field::before{
content: "";
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
opacity: 0.45;
pointer-events: none;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-field:has(input[type="password"])::before{
background-image: url("data:image/svg+xml;utf8,");
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-field:has(input[type="tel"])::before,
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-field:has(.auth-v3-phone)::before{
background-image: url("data:image/svg+xml;utf8,");
}
/* Phone with prefix +CC */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-field:has(.auth-v3-phone){ padding: 0 !important; }
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-phone{
display: flex !important;
align-items: stretch !important;
background: #13202E !important;
border: 0.5px solid #1e2e40 !important;
border-radius: 10px !important;
overflow: hidden !important;
height: 46px !important;
transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-phone:focus-within{
border-color: #F5A623 !important;
background: #15243A !important;
box-shadow: 0 0 0 2px rgba(245,166,35,0.10) !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-phone-prefix{
padding: 0 12px 0 42px !important;
display: inline-flex !important;
align-items: center !important;
color: #aaaaaa !important;
font-size: 13px !important;
font-weight: 500 !important;
border-right: 0.5px solid #1e2e40 !important;
background: transparent !important;
letter-spacing: 0.2px !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-phone .auth-v3-input{
border: none !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 14px !important;
height: 100% !important;
flex: 1 !important;
box-shadow: none !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-phone .auth-v3-input:focus{
background: transparent !important;
box-shadow: none !important;
}
/* OTP send button */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-otp-btn{
padding: 0 14px !important;
height: 46px !important;
background: rgba(245,166,35,0.10) !important;
border: 0.5px solid rgba(245,166,35,0.40) !important;
border-radius: 10px !important;
color: #F5A623 !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.3px !important;
cursor: pointer !important;
white-space: nowrap !important;
transition: background 0.18s ease !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-otp-btn:hover{
background: rgba(245,166,35,0.18) !important;
}
/* Eye toggle */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-eye{
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important;
border: 0 !important;
width: 32px !important;
height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #94a3b8 !important;
cursor: pointer !important;
border-radius: 8px !important;
transition: color 0.18s ease, background 0.18s ease !important;
padding: 0 !important;
z-index: 2 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-eye:hover{
color: #E2E8F0 !important;
background: rgba(148,163,184,0.10) !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-eye svg{
width: 16px !important;
height: 16px !important;
pointer-events: none !important;
}
/* CTA — orange solid + icon */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-cta{
width: 100% !important;
padding: 13px 18px !important;
height: auto !important;
background: #F5A623 !important;
border: none !important;
border-radius: 10px !important;
color: #1a0a00 !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.2px !important;
cursor: pointer !important;
margin: 4px 0 10px 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
position: static !important;
box-shadow: 0 6px 18px -8px rgba(245,166,35,0.45) !important;
transition: transform 0.12s ease, filter 0.18s ease, box-shadow 0.18s ease !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-cta:hover{
filter: brightness(1.05) !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-cta:active{
transform: translateY(1px) !important;
background: #E59812 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-cta-icon{
width: 16px !important;
height: 16px !important;
flex-shrink: 0 !important;
color: #1a0a00 !important;
}
/* Foot link (Forgot password) with key icon */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-foot{
text-align: center !important;
margin: 0 !important;
font-size: 12px !important;
display: block !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-link{
color: #F5A623 !important;
font-weight: 600 !important;
font-size: 12px !important;
text-decoration: none !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
margin: 0 auto !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-link:hover{
text-decoration: underline !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-link-icon-svg{
width: 12px !important;
height: 12px !important;
flex-shrink: 0 !important;
color: #F5A623 !important;
}
/* Switcher hint */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-switch{
font-size: 11px !important;
color: #334455 !important;
text-align: center !important;
margin-top: 10px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-switch-link{
color: #F5A623 !important;
font-weight: 600 !important;
cursor: pointer !important;
text-decoration: none !important;
margin-left: 2px !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-switch-link:hover{
text-decoration: underline !important;
}
/* Hints under fields */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-hint{
font-size: 10px !important;
color: #334455 !important;
margin: 4px 0 0 4px !important;
line-height: 1.4 !important;
}
/* Turnstile container — minimal footprint */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-field:has(> [id^="ts-"]){
background: transparent !important;
border: none !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 0 8px 0 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-field:has(> [id^="ts-"])::before{ display: none !important; }
/* Hide deprecated artifacts */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-mascot,
html body #modal-auth.modal-backdrop .f96-auth,
html body #modal-auth.modal-backdrop .f96a-switch,
html body #modal-auth.modal-backdrop .f96a-tag{ display: none !important; }
/* Auth v3 — Remember me checkbox (Mz spec 2026-05-27 night) */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-remember{
display: none;
align-items: center !important;
gap: 8px !important;
margin: 0 0 10px 0 !important;
padding: 2px 2px !important;
cursor: pointer !important;
user-select: none !important;
font-size: 12px !important;
color: #aaaaaa !important;
font-weight: 500 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-remember-cb{
position: absolute !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
pointer-events: none !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-remember-box{
width: 16px !important;
height: 16px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #13202E !important;
border: 0.5px solid #1e2e40 !important;
border-radius: 4px !important;
flex-shrink: 0 !important;
transition: background 0.18s ease, border-color 0.18s ease !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-remember-box svg{
width: 11px !important;
height: 11px !important;
color: transparent !important;
transition: color 0.18s ease !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-remember-cb:checked + .auth-v3-remember-box{
background: #F5A623 !important;
border-color: #F5A623 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-remember-cb:checked + .auth-v3-remember-box svg{
color: #1a0a00 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-remember-cb:focus-visible + .auth-v3-remember-box{
box-shadow: 0 0 0 2px rgba(245,166,35,0.30) !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-remember-text{
font-size: 12px !important;
color: #aaaaaa !important;
font-weight: 500 !important;
line-height: 1 !important;
}
/* Auth v3 — Tabs exact spec override (Mz 2026-05-27 night) */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tabs{
display: flex !important;
width: calc(100% - 36px) !important;
margin: 14px 18px 0 !important;
background: #13202E !important;
border-radius: 10px !important;
padding: 3px !important;
gap: 3px !important;
box-sizing: border-box !important;
border: none !important;
grid-template-columns: none !important;
position: static !important;
flex: 0 0 auto !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tab{
flex: 1 1 0 !important;
width: 100% !important;
min-width: 0 !important;
padding: 9px 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
border-radius: 8px !important;
border: none !important;
text-align: center !important;
background: transparent !important;
color: #445566 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
box-shadow: none !important;
outline: none !important;
box-sizing: border-box !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tab.active{
background: #F5A623 !important;
color: #1a0a00 !important;
border-radius: 8px !important;
font-weight: 500 !important;
box-shadow: 0 2px 8px rgba(245,166,35,0.25) !important;
}
/* Auth v3 — Tabs background hard lock (Mz 2026-05-27 night)
Doubled .auth-v3-tabs.auth-v3-tabs adds extra specificity to outrank
earlier sticky-gradient block that faded to transparent. */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tabs.auth-v3-tabs{
background: #13202E !important;
background-color: #13202E !important;
background-image: none !important;
border-radius: 10px !important;
padding: 3px !important;
display: flex !important;
width: calc(100% - 36px) !important;
margin: 14px auto 0 !important;
gap: 3px !important;
min-height: 44px !important;
box-sizing: border-box !important;
border: none !important;
position: static !important;
top: auto !important;
z-index: auto !important;
}
/* Kill sticky pseudo-element that drew underlying solid layer */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tabs.auth-v3-tabs::before{
display: none !important;
content: none !important;
background: transparent !important;
}
/* Active tab radius (8) sits inside container radius (10) — Mz spec confirms */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tab.auth-v3-tab{
border-radius: 8px !important;
}
/* Auth v3 — Tabs center alignment final fix (Mz 2026-05-27 night)
margin: auto in flex column was unreliable on some webkit builds.
Switch to explicit 18px left+right + width:auto + align-self:stretch
so flex container auto-computes width = parent - 36px symmetrically. */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tabs.auth-v3-tabs{
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin-top: 14px !important;
margin-right: 18px !important;
margin-bottom: 0 !important;
margin-left: 18px !important;
align-self: stretch !important;
padding: 3px !important;
box-sizing: border-box !important;
display: flex !important;
gap: 3px !important;
border-radius: 10px !important;
background: #13202E !important;
background-image: none !important;
background-color: #13202E !important;
min-height: 44px !important;
position: static !important;
left: auto !important;
right: auto !important;
inset: auto !important;
float: none !important;
text-align: initial !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tab.auth-v3-tab{
flex: 1 1 0 !important;
width: 0 !important;
min-width: 0 !important;
max-width: none !important;
text-align: center !important;
padding: 9px 0 !important;
margin: 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
border-radius: 8px !important;
border: none !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Auth v3 - Lock body scroll when modal open (Mz 2026-05-27 night) */
html.f96-modal-open, body.f96-modal-open{
overflow: hidden !important;
}
/* Auth v3 - Tabs pill-style refinement (Mz 2026-05-27 night) */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tabs.auth-v3-tabs{
background: #1C2A3A !important;
background-color: #1C2A3A !important;
background-image: none !important;
border-radius: 12px !important;
padding: 4px !important;
display: flex !important;
gap: 0 !important;
width: auto !important;
margin-top: 14px !important;
margin-right: 18px !important;
margin-bottom: 0 !important;
margin-left: 18px !important;
align-self: stretch !important;
box-sizing: border-box !important;
border: none !important;
position: static !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tab.auth-v3-tab{
flex: 1 1 0 !important;
width: 0 !important;
min-width: 0 !important;
padding: 10px 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
border-radius: 9px !important;
border: none !important;
text-align: center !important;
background: transparent !important;
color: #556677 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
box-sizing: border-box !important;
cursor: pointer !important;
transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tab.auth-v3-tab:hover{
color: #7c8fa3 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tab.auth-v3-tab.active{
background: #F5A623 !important;
color: #1a0a00 !important;
border-radius: 9px !important;
box-shadow: 0 2px 8px rgba(245,166,35,0.25) !important;
}
/* Auth v3 - Tabs exact dimensions (Mz 2026-05-27 night)
Container 52px - 5px padding x 2 = 42px button height (exact fit). */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tabs.auth-v3-tabs{
background: #1C2A3A !important;
background-color: #1C2A3A !important;
background-image: none !important;
border-radius: 14px !important;
padding: 5px !important;
display: flex !important;
align-items: center !important;
height: 52px !important;
min-height: 52px !important;
width: auto !important;
margin-top: 14px !important;
margin-right: 18px !important;
margin-bottom: 0 !important;
margin-left: 18px !important;
align-self: stretch !important;
box-sizing: border-box !important;
border: none !important;
gap: 0 !important;
position: static !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tab.auth-v3-tab{
flex: 1 1 0 !important;
width: 0 !important;
min-width: 0 !important;
height: 42px !important;
padding: 0 !important;
font-size: 14px !important;
font-weight: 500 !important;
border-radius: 10px !important;
border: none !important;
text-align: center !important;
background: transparent !important;
color: #445566 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
box-sizing: border-box !important;
cursor: pointer !important;
transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tab.auth-v3-tab:hover{
color: #6b7c91 !important;
}
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-tab.auth-v3-tab.active{
background: #F5A623 !important;
color: #1a0a00 !important;
border-radius: 10px !important;
box-shadow: 0 2px 8px rgba(245,166,35,0.25) !important;
}
/* Auth v3 - CMS hint text under fields (Mz audit fix 2026-05-27) */
html body #modal-auth.modal-backdrop .auth-v3 .auth-v3-cms-hint{
font-size: 11px !important;
color: #6b7c91 !important;
margin: 4px 0 0 4px !important;
line-height: 1.4 !important;
font-weight: 400 !important;
letter-spacing: 0.1px !important;
}
/* ============================================================
Profile v3 - Mz polish 2026-05-28 (7 fixes)
html body prefix bumps specificity above any prior pf3 rules
============================================================ */
/* 1. X close button absolute top-right, doesn't scroll */
html body #modal-profile .pf-v3 .pf3-header{
position: sticky !important;
top: 0 !important;
z-index: 5 !important;
background: #0E1621 !important;
padding: 14px 16px 10px !important;
}
html body #modal-profile .pf-v3 .pf3-close{
position: absolute !important;
top: 16px !important;
right: 16px !important;
z-index: 6 !important;
}
/* 2. Balance split 3-col (Main / Bonus / Locked) */
html body #modal-profile .pf-v3 .pf3-bal-split-3col{
display: grid !important;
grid-template-columns: 1fr 1px 1fr 1px 1fr !important;
gap: 0 !important;
align-items: center !important;
margin-top: 12px !important;
}
html body #modal-profile .pf-v3 .pf3-bal-split-3col .pf3-bal-divider{
width: 1px !important;
height: 28px !important;
background: rgba(255,255,255,0.08) !important;
margin: 0 auto !important;
}
html body #modal-profile .pf-v3 .pf3-bal-split-3col .pf3-bal-sub{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 3px !important;
}
html body #modal-profile .pf-v3 .pf3-bal-split-3col .pf3-bal-mono{
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-variant-numeric: tabular-nums !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #e5e7eb !important;
}
/* 3. Quick Actions - Deposit highlight green, others muted */
html body #modal-profile .pf-v3 .pf3-quick{
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
margin-bottom: 14px !important;
}
html body #modal-profile .pf-v3 .pf3-qa{
background: #13202E !important;
border: 0.5px solid #1e2e40 !important;
border-radius: 10px !important;
padding: 10px 6px !important;
color: #94a3b8 !important;
cursor: pointer !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
transition: transform 0.15s ease, background 0.15s ease !important;
}
html body #modal-profile .pf-v3 .pf3-qa:hover{
transform: translateY(-1px) !important;
}
html body #modal-profile .pf-v3 .pf3-qa[data-pf-action="deposit"]{
background: #0d2a40 !important;
border-color: #1D9E75 !important;
color: #5DCAA5 !important;
}
html body #modal-profile .pf-v3 .pf3-qa[data-pf-action="deposit"] .pf3-qa-icon{
background: rgba(29,158,117,0.18) !important;
color: #5DCAA5 !important;
}
html body #modal-profile .pf-v3 .pf3-qa[data-pf-action="deposit"] span{
color: #5DCAA5 !important;
font-weight: 700 !important;
}
/* 4. ACCOUNT menu - visible + tight spacing */
html body #modal-profile .pf-v3 .pf3-menu{
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
margin-bottom: 14px !important;
}
html body #modal-profile .pf-v3 .pf3-menu-item{
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
padding: 12px 14px !important;
background: #13202E !important;
border: 0.5px solid #1e2e40 !important;
border-radius: 10px !important;
color: #e5e7eb !important;
cursor: pointer !important;
transition: background 0.15s !important;
}
html body #modal-profile .pf-v3 .pf3-menu-item:hover{
background: #182838 !important;
}
html body #modal-profile .pf-v3 .pf3-menu-icon{
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
html body #modal-profile .pf-v3 .pf3-menu-icon svg{
width: 18px !important;
height: 18px !important;
}
html body #modal-profile .pf-v3 .pf3-menu-meta{
flex: 1 !important;
min-width: 0 !important;
text-align: left !important;
}
html body #modal-profile .pf-v3 .pf3-menu-title{
font-size: 13.5px !important;
font-weight: 600 !important;
color: #e5e7eb !important;
line-height: 1.2 !important;
}
html body #modal-profile .pf-v3 .pf3-menu-sub{
font-size: 11px !important;
color: #6b7c91 !important;
margin-top: 2px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body #modal-profile .pf-v3 .pf3-menu-chev{
width: 16px !important;
height: 16px !important;
color: #475569 !important;
flex-shrink: 0 !important;
}
html body #modal-profile .pf-v3 .pf3-menu-tag{
font-size: 10px !important;
font-weight: 700 !important;
padding: 4px 10px !important;
background: rgba(251,191,36,0.15) !important;
color: #fbbf24 !important;
border: 1px solid rgba(251,191,36,0.3) !important;
border-radius: 999px !important;
flex-shrink: 0 !important;
}
/* 6. Log out - low-key */
html body #modal-profile .pf-v3 .pf3-logout{
width: 100% !important;
padding: 11px 14px !important;
background: transparent !important;
border: 0.5px solid #2a1515 !important;
border-radius: 10px !important;
color: #664444 !important;
font-size: 13px !important;
font-weight: 500 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin-top: 4px !important;
transition: background 0.15s, color 0.15s !important;
}
html body #modal-profile .pf-v3 .pf3-logout:hover{
background: rgba(239,68,68,0.08) !important;
color: #884444 !important;
border-color: #4a2020 !important;
}
/* 7. Tighter spacing throughout */
html body #modal-profile .pf-v3 .pf3-body{
padding: 12px 16px 24px !important;
}
html body #modal-profile .pf-v3 .pf3-section-head{
margin: 14px 0 8px !important;
font-size: 10.5px !important;
font-weight: 800 !important;
color: #64748b !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
}
html body #modal-profile .pf-v3 .pf3-hero,
html body #modal-profile .pf-v3 .pf3-bal-card,
html body #modal-profile .pf-v3 .pf3-quick,
html body #modal-profile .pf-v3 .pf3-stats-grid,
html body #modal-profile .pf-v3 .pf3-ref-card,
html body #modal-profile .pf-v3 .pf3-menu{
margin-bottom: 14px !important;
}
html body #modal-profile .pf-v3 .pf3-stats-grid{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
html body #modal-profile .pf-v3 .pf3-stat{
padding: 10px 12px !important;
}
/* ============================================================
Profile v3 — Mz complete redesign 2026-05-28
html body prefix outranks all prior pf3 rules
============================================================ */
/* ─── Backdrop + container ─── */
html body #modal-profile.modal-backdrop.show{
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
padding: 0 !important;
background: rgba(2,8,16,0.7) !important;
}
@media (min-width: 600px){
html body #modal-profile.modal-backdrop.show{
align-items: center !important;
padding: 24px !important;
}
}
html body #modal-profile .pf-v3{
width: 100% !important;
max-width: 460px !important;
margin: 0 auto !important;
background: #0E1621 !important;
border-radius: 20px 20px 0 0 !important;
padding: 0 !important;
max-height: 92dvh !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
border: 1px solid rgba(255,255,255,0.04) !important;
position: relative !important;
}
@supports not (max-height: 92dvh){
html body #modal-profile .pf-v3{ max-height: 92vh !important; }
}
@media (min-width: 600px){
html body #modal-profile .pf-v3{ border-radius: 20px !important; }
}
/* ─── Drag handle ─── */
html body #modal-profile .pf-v3 .pf3-handle{
width: 36px !important;
height: 4px !important;
background: #2a3545 !important;
border-radius: 2px !important;
margin: 10px auto 6px !important;
display: block !important;
flex-shrink: 0 !important;
}
/* ─── Header (close button only, sticky) ─── */
html body #modal-profile .pf-v3 .pf3-header{
padding: 0 16px 0 !important;
background: transparent !important;
position: relative !important;
z-index: 5 !important;
flex-shrink: 0 !important;
display: flex !important;
justify-content: flex-end !important;
}
html body #modal-profile .pf-v3 .pf3-title{
display: none !important;
}
html body #modal-profile .pf-v3 .pf3-close{
position: relative !important;
top: 0 !important;
right: 0 !important;
width: 26px !important;
height: 26px !important;
background: rgba(255,255,255,0.08) !important;
border: none !important;
border-radius: 50% !important;
color: #cbd5e1 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
html body #modal-profile .pf-v3 .pf3-close svg{ width: 14px !important; height: 14px !important; }
/* ─── Body scrolling region ─── */
html body #modal-profile .pf-v3 .pf3-body{
padding: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
flex: 1 1 auto !important;
min-height: 0 !important;
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
}
/* ─── Section 1: Hero gradient ─── */
html body #modal-profile .pf-v3 .pf3-hero{
background: linear-gradient(180deg, #0d2137 0%, #0E1621 100%) !important;
padding: 0 16px 14px !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
position: relative !important;
}
/* Avatar */
html body #modal-profile .pf-v3 .pf3-avatar-wrap{
position: relative !important;
width: 52px !important;
height: 52px !important;
margin: 0 auto 8px !important;
}
html body #modal-profile .pf-v3 .pf3-avatar{
width: 52px !important;
height: 52px !important;
border-radius: 50% !important;
background: #F5A623 !important;
color: #fff !important;
font-size: 16px !important;
font-weight: 500 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 2px solid rgba(255,255,255,0.15) !important;
}
html body #modal-profile .pf-v3 .pf3-avatar-cam{
position: absolute !important;
bottom: -2px !important;
right: -2px !important;
width: 18px !important;
height: 18px !important;
background: #185FA5 !important;
border-radius: 50% !important;
border: 1.5px solid #0E1621 !important;
color: #fff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
cursor: pointer !important;
}
html body #modal-profile .pf-v3 .pf3-avatar-cam svg{ width: 10px !important; height: 10px !important; }
/* Name + sub */
html body #modal-profile .pf-v3 .pf3-name{
font-size: 15px !important;
font-weight: 500 !important;
color: #fff !important;
text-align: center !important;
margin: 0 !important;
}
html body #modal-profile .pf-v3 .pf3-sub{
font-size: 11px !important;
color: #445566 !important;
text-align: center !important;
margin: 2px 0 6px !important;
}
html body #modal-profile .pf-v3 .pf3-dot{ color: #2a3545 !important; margin: 0 4px !important; }
/* Badges */
html body #modal-profile .pf-v3 .pf3-badges{
display: flex !important;
gap: 6px !important;
justify-content: center !important;
margin: 0 !important;
}
html body #modal-profile .pf-v3 .pf3-badge{
font-size: 9.5px !important;
font-weight: 600 !important;
padding: 3px 9px !important;
border-radius: 999px !important;
letter-spacing: 0.3px !important;
}
html body #modal-profile .pf-v3 .pf3-badge-tier{ background: #1a2535 !important; color: #F5A623 !important; }
html body #modal-profile .pf-v3 .pf3-badge-status{ background: #0d2a1a !important; color: #4CAF50 !important; }
html body #modal-profile .pf-v3 .pf3-badge-since{ background: #1a2535 !important; color: #445566 !important; }
/* ─── Balance card ─── */
html body #modal-profile .pf-v3 .pf3-bal-card{
background: #13202E !important;
border: 0.5px solid #1e2e40 !important;
border-radius: 12px !important;
padding: 12px 14px !important;
margin: 12px 16px 0 !important;
}
html body #modal-profile .pf-v3 .pf3-bal-top{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 4px !important;
}
html body #modal-profile .pf-v3 .pf3-bal-top .pf3-mini-label{
font-size: 9px !important;
color: #445566 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
font-weight: 600 !important;
}
html body #modal-profile .pf-v3 .pf3-eye{
width: 22px !important;
height: 22px !important;
background: transparent !important;
border: 0 !important;
color: #475569 !important;
cursor: pointer !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html body #modal-profile .pf-v3 .pf3-eye svg{ width: 16px !important; height: 16px !important; }
html body #modal-profile .pf-v3 .pf3-bal-val{
font-size: 24px !important;
font-weight: 500 !important;
color: #fff !important;
margin-bottom: 8px !important;
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-variant-numeric: tabular-nums !important;
}
html body #modal-profile .pf-v3 .pf3-bal-split{
display: grid !important;
grid-template-columns: 1fr 1px 1fr 1px 1fr !important;
gap: 0 !important;
align-items: center !important;
}
html body #modal-profile .pf-v3 .pf3-bal-divider{
width: 1px !important;
height: 24px !important;
background: rgba(255,255,255,0.06) !important;
margin: 0 auto !important;
}
html body #modal-profile .pf-v3 .pf3-bal-sub{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 3px !important;
}
html body #modal-profile .pf-v3 .pf3-bal-sub .pf3-mini-label{
font-size: 9px !important;
color: #445566 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
html body #modal-profile .pf-v3 .pf3-bal-mono{
font-size: 11px !important;
font-weight: 600 !important;
color: #e5e7eb !important;
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
/* ─── Section heads (LIFETIME STATS, REFER & EARN, ACCOUNT) ─── */
html body #modal-profile .pf-v3 .pf3-section-head{
font-size: 9px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: #334455 !important;
margin: 14px 14px 6px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
html body #modal-profile .pf-v3 .pf3-section-head::after{
content: "";
flex: 1;
height: 0.5px;
background: #1a2535;
}
/* ─── Section 2: Quick Actions ─── */
html body #modal-profile .pf-v3 .pf3-quick{
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 6px !important;
padding: 10px 14px 0 !important;
margin: 0 !important;
}
html body #modal-profile .pf-v3 .pf3-qa{
background: #13202E !important;
border: 0.5px solid #1e2e40 !important;
border-radius: 10px !important;
padding: 9px 4px !important;
cursor: pointer !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 4px !important;
color: #445566 !important;
}
html body #modal-profile .pf-v3 .pf3-qa span{
font-size: 9px !important;
font-weight: 500 !important;
letter-spacing: 0.2px !important;
}
html body #modal-profile .pf-v3 .pf3-qa-icon{
width: 18px !important;
height: 18px !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: inherit !important;
}
html body #modal-profile .pf-v3 .pf3-qa-icon svg{ width: 16px !important; height: 16px !important; }
html body #modal-profile .pf-v3 .pf3-qa[data-pf-action="deposit"]{
background: #0d2a40 !important;
border-color: #1D9E75 !important;
color: #5DCAA5 !important;
}
/* ─── Section 3: Lifetime Stats 2x2 with colored borders ─── */
html body #modal-profile .pf-v3 .pf3-stats-grid{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
padding: 0 14px !important;
margin: 0 !important;
}
html body #modal-profile .pf-v3 .pf3-stat{
background: #13202E !important;
border: 0.5px solid #1e2e40 !important;
border-radius: 8px !important;
padding: 8px 10px !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
html body #modal-profile .pf-v3 .pf3-stat-top{
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
html body #modal-profile .pf-v3 .pf3-stat-lbl{
font-size: 9px !important;
color: #445566 !important;
text-transform: uppercase !important;
letter-spacing: 0.4px !important;
}
html body #modal-profile .pf-v3 .pf3-dot-marker{
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
display: inline-block !important;
}
html body #modal-profile .pf-v3 .pf3-stat-val{
font-size: 14px !important;
font-weight: 600 !important;
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-variant-numeric: tabular-nums !important;
line-height: 1.2 !important;
}
html body #modal-profile .pf-v3 .pf3-stat-sub{
font-size: 9px !important;
color: #334455 !important;
}
/* Colored left borders per stat */
html body #modal-profile .pf-v3 .pf3-stat:nth-child(1){ border-left: 2px solid #1D9E75 !important; }
html body #modal-profile .pf-v3 .pf3-stat:nth-child(2){ border-left: 2px solid #E24B4A !important; }
html body #modal-profile .pf-v3 .pf3-stat:nth-child(3){ border-left: 2px solid #9C6FDE !important; }
html body #modal-profile .pf-v3 .pf3-stat:nth-child(4){ border-left: 2px solid #185FA5 !important; }
/* ─── Section 4: Refer & Earn ─── */
html body #modal-profile .pf-v3 .pf3-ref-card{
background: #13202E !important;
border: 0.5px solid #1e2e40 !important;
border-radius: 10px !important;
padding: 10px 12px !important;
margin: 0 14px 10px !important;
}
html body #modal-profile .pf-v3 .pf3-ref-row{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 8px !important;
}
html body #modal-profile .pf-v3 .pf3-ref-code-wrap{ flex: 1 !important; min-width: 0 !important; }
html body #modal-profile .pf-v3 .pf3-ref-code{
font-size: 16px !important;
font-weight: 500 !important;
color: #F5A623 !important;
letter-spacing: 0.1em !important;
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
html body #modal-profile .pf-v3 .pf3-ref-copy{
padding: 5px 12px !important;
background: #1a3050 !important;
border: 0 !important;
border-radius: 6px !important;
font-size: 10px !important;
font-weight: 600 !important;
color: #5DCAA5 !important;
cursor: pointer !important;
}
html body #modal-profile .pf-v3 .pf3-ref-stats{
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 4px !important;
padding-top: 6px !important;
border-top: 0.5px solid #1a2535 !important;
}
html body #modal-profile .pf-v3 .pf3-ref-stat{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
}
html body #modal-profile .pf-v3 .pf3-ref-stat-val{
font-size: 12px !important;
font-weight: 600 !important;
}
/* ─── Section 5: Account menu ─── */
html body #modal-profile .pf-v3 .pf3-menu{
background: #13202E !important;
border-radius: 10px !important;
overflow: hidden !important;
margin: 0 14px 10px !important;
border: 0.5px solid #1e2e40 !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
html body #modal-profile .pf-v3 .pf3-menu-item{
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 12px !important;
background: transparent !important;
border: none !important;
border-bottom: 0.5px solid #1a2535 !important;
border-radius: 0 !important;
color: #e5e7eb !important;
cursor: pointer !important;
width: 100% !important;
text-align: left !important;
}
html body #modal-profile .pf-v3 .pf3-menu-item:last-child{ border-bottom: 0 !important; }
html body #modal-profile .pf-v3 .pf3-menu-item:hover{ background: rgba(255,255,255,0.02) !important; }
html body #modal-profile .pf-v3 .pf3-menu-icon{
width: 28px !important;
height: 28px !important;
border-radius: 7px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
html body #modal-profile .pf-v3 .pf3-menu-icon svg{ width: 16px !important; height: 16px !important; }
/* Per-item icon background overrides */
html body #modal-profile .pf-v3 .pf3-menu-item[data-pf-menu="info"] .pf3-menu-icon{ background: #0d2a40 !important; color: #378ADD !important; }
html body #modal-profile .pf-v3 .pf3-menu-item[data-pf-menu="bank"] .pf3-menu-icon{ background: #0d2a1a !important; color: #4CAF50 !important; }
html body #modal-profile .pf-v3 .pf3-menu-item[data-pf-menu="vip"] .pf3-menu-icon{ background: #2a1d05 !important; color: #F5A623 !important; }
html body #modal-profile .pf-v3 .pf3-menu-item[data-pf-menu="notifications"] .pf3-menu-icon{ background: #1d1235 !important; color: #9C6FDE !important; }
html body #modal-profile .pf-v3 .pf3-menu-item[data-pf-menu="security"] .pf3-menu-icon{ background: #1a2535 !important; color: #556677 !important; }
html body #modal-profile .pf-v3 .pf3-menu-item[data-pf-menu="language"] .pf3-menu-icon{ background: #1a2535 !important; color: #556677 !important; }
html body #modal-profile .pf-v3 .pf3-menu-meta{ flex: 1 !important; min-width: 0 !important; }
html body #modal-profile .pf-v3 .pf3-menu-title{
font-size: 12.5px !important;
font-weight: 500 !important;
color: #e5e7eb !important;
line-height: 1.2 !important;
}
html body #modal-profile .pf-v3 .pf3-menu-sub{
font-size: 10px !important;
color: #445566 !important;
margin-top: 2px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body #modal-profile .pf-v3 .pf3-menu-chev{
width: 14px !important;
height: 14px !important;
color: #2a3545 !important;
flex-shrink: 0 !important;
}
html body #modal-profile .pf-v3 .pf3-menu-tag{
font-size: 9.5px !important;
font-weight: 700 !important;
padding: 3px 8px !important;
background: rgba(245,166,35,0.12) !important;
color: #F5A623 !important;
border: 0.5px solid rgba(245,166,35,0.3) !important;
border-radius: 999px !important;
flex-shrink: 0 !important;
}
/* ─── Section 6: Logout + version ─── */
html body #modal-profile .pf-v3 .pf3-logout{
width: calc(100% - 28px) !important;
margin: 0 14px 4px !important;
padding: 10px !important;
background: transparent !important;
border: 0.5px solid #2a1515 !important;
border-radius: 8px !important;
color: #443333 !important;
font-size: 12px !important;
font-weight: 500 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
html body #modal-profile .pf-v3 .pf3-logout:hover{
background: rgba(239,68,68,0.06) !important;
color: #664444 !important;
}
html body #modal-profile .pf-v3 .pf3-version{
text-align: center !important;
font-size: 9px !important;
color: #1a2535 !important;
padding: 10px 0 !important;
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
/* ─── Balance hidden state ─── */
html body #modal-profile .pf-v3.pf3-bal-hidden .pf3-bal-val,
html body #modal-profile .pf-v3.pf3-bal-hidden .pf3-bal-mono,
html body #modal-profile .pf-v3.pf3-bal-hidden .pf3-stat-val,
html body #modal-profile .pf-v3.pf3-bal-hidden .pf3-ref-stat-val{
color: transparent !important;
text-shadow: 0 0 8px rgba(229,231,235,0.55) !important;
letter-spacing: 4px !important;
}
/* ============================================================
Profile v3 - finetune (Mz 2026-05-28)
============================================================ */
/* 2. X close absolute top-right of modal, overlays Hero */
html body #modal-profile .pf-v3 .pf3-header{
display: none !important; /* hide header row - close button absolutely placed instead */
}
html body #modal-profile .pf-v3 .pf3-close{
position: absolute !important;
top: 12px !important;
right: 14px !important;
z-index: 10 !important;
width: 26px !important;
height: 26px !important;
background: rgba(255,255,255,0.08) !important;
border: none !important;
border-radius: 50% !important;
color: #cbd5e1 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
html body #modal-profile .pf-v3 .pf3-close svg{
width: 13px !important;
height: 13px !important;
}
/* Reposition close visible at top of modal via fixed: but profile body scrolls, close should stay */
html body #modal-profile .pf-v3{
position: relative !important; /* anchor for absolute close */
}
/* 1. Hero gradient (slight override to ensure tight padding) */
html body #modal-profile .pf-v3 .pf3-hero{
background: linear-gradient(180deg, #0d2137 0%, #0E1621 100%) !important;
padding: 18px 16px 12px !important; /* extra top space for X */
}
/* 3. Badge gap 6 + height 20 */
html body #modal-profile .pf-v3 .pf3-badges{
display: flex !important;
gap: 6px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
html body #modal-profile .pf-v3 .pf3-badge{
height: 20px !important;
display: inline-flex !important;
align-items: center !important;
padding: 0 9px !important;
font-size: 9.5px !important;
font-weight: 600 !important;
line-height: 1 !important;
}
/* 4. Balance card border 0.5px */
html body #modal-profile .pf-v3 .pf3-bal-card{
border: 0.5px solid #1e2e40 !important;
margin: 10px 14px 0 !important;
padding: 10px 12px !important;
}
/* 5. Stats colored border 2px (already set but reinforce) */
html body #modal-profile .pf-v3 .pf3-stat{
padding: 8px 10px !important;
border-width: 0.5px !important;
}
html body #modal-profile .pf-v3 .pf3-stat:nth-child(1){ border-left: 2px solid #1D9E75 !important; }
html body #modal-profile .pf-v3 .pf3-stat:nth-child(2){ border-left: 2px solid #E24B4A !important; }
html body #modal-profile .pf-v3 .pf3-stat:nth-child(3){ border-left: 2px solid #9C6FDE !important; }
html body #modal-profile .pf-v3 .pf3-stat:nth-child(4){ border-left: 2px solid #185FA5 !important; }
/* 6. Section label 9px + tighter gaps */
html body #modal-profile .pf-v3 .pf3-section-head{
font-size: 9px !important;
margin: 10px 14px 4px !important;
letter-spacing: 0.06em !important;
}
html body #modal-profile .pf-v3 .pf3-hero,
html body #modal-profile .pf-v3 .pf3-bal-card,
html body #modal-profile .pf-v3 .pf3-quick,
html body #modal-profile .pf-v3 .pf3-stats-grid,
html body #modal-profile .pf-v3 .pf3-ref-card,
html body #modal-profile .pf-v3 .pf3-menu{
margin-bottom: 10px !important;
}
/* Cards general 8/10 padding */
html body #modal-profile .pf-v3 .pf3-ref-card,
html body #modal-profile .pf-v3 .pf3-quick .pf3-qa{
padding: 8px 10px !important;
}
html body #modal-profile .pf-v3 .pf3-menu-item{
padding: 9px 10px !important;
}
/* 7. Body scroll + bottom padding ensures full menu visible */
html body #modal-profile .pf-v3 .pf3-body{
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
padding-top: 4px !important;
}
/* Drag handle stays at top, doesn't scroll - sticky position */
html body #modal-profile .pf-v3 .pf3-handle{
position: sticky !important;
top: 0 !important;
z-index: 6 !important;
margin: 10px auto 0 !important;
background-color: transparent !important;
}
/* Workaround - bg gradient to keep handle visible during scroll */
html body #modal-profile .pf-v3 .pf3-handle::after{
content: "";
position: absolute;
inset: -10px 0 0 0;
background: linear-gradient(180deg, #0d2137 60%, transparent);
z-index: -1;
pointer-events: none;
}
/* Fix Profile X close visibility (Mz 2026-05-28)
Prior CSS hid .pf3-header with display:none which collapsed the close
button child to 0x0. Keep header in flow but zero-size + visible overflow
so absolute-positioned .pf3-close still renders at top-right of modal. */
html body #modal-profile .pf-v3 .pf3-header{
display: block !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
width: auto !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
background: transparent !important;
pointer-events: none !important;
z-index: 11 !important;
}
html body #modal-profile .pf-v3 .pf3-header .pf3-title{
display: none !important;
}
html body #modal-profile .pf-v3 .pf3-header .pf3-close{
pointer-events: auto !important;
position: absolute !important;
top: 12px !important;
right: 14px !important;
width: 26px !important;
height: 26px !important;
z-index: 12 !important;
}