/* ==== style L198 ==== */
/* --- Dark Mode (Default) Variables --- */
:root {
--bg-grad: radial-gradient(circle at center, #0a2d6e 0%, #011129 100%);
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-blur: 15px;
--accent: #00f2ff;
--accent-glow: rgba(0, 242, 255, 0.3);
--border-glow: 1px solid rgba(0, 242, 255, 0.4);
--text-main: #ffffff;
--text-dim: #94a3b8;
--primary-gradient: linear-gradient(135deg, #007bff, #00f2ff);
--card-bg-layer1: rgba(255, 255, 255, 0.03);
--card-bg-layer2: rgba(0, 0, 0, 0.4);
--card-border: rgba(255, 255, 255, 0.15);
--logo-opacity: 0.12;
--logo-color: #000;
}
/* --- Light (White) Mode Variables --- */
body.light-mode {
--bg-grad: linear-gradient(180deg, #2a3a8c 0%, #4a6fd4 50%, #87ceeb 100%);
--bg-image: url('https://archives.bulbagarden.net/media/upload/thumb/4/45/0094Gengar.png/250px-0094Gengar.png');
--glass-bg: rgba(255, 255, 255, 0.7);
--text-main: #1c1c1e;
--text-dim: #666;
--accent: #007bff;
--accent-glow: rgba(0, 123, 255, 0.3);
--border-glow: 1px solid rgba(0, 123, 255, 0.4);
--card-bg-layer1: rgba(255, 255, 255, 0.6);
--card-bg-layer2: rgba(255, 255, 255, 0.4);
--card-border: rgba(0, 0, 0, 0.1);
--logo-opacity: 0.05;
--logo-color: #000;
}
body.light-mode .gc-bw-back, body.light-mode h2, body.light-mode .gc-cat-title, body.light-mode .gc-inst-title, body.light-mode .gc-desc-title { color: #1c1c1e !important; text-shadow: none; }
body.light-mode .bw-card, body.light-mode .gc-dark-inner-box { background: rgba(255,255,255,0.8) !important; border: 1px solid rgba(0,0,0,0.1) !important; color: #1c1c1e !important; }
body.light-mode .gc-item-title { background: rgba(0,0,0,0.05) !important; color: #1c1c1e !important; border: 1px solid rgba(0,0,0,0.1) !important; box-shadow: none !important; }
body.light-mode .gc-item-price { color: #000 !important; }
body.light-mode .gc-instructions ol { color: #444; }
body.light-mode .gc-instructions ol li b { color: #000; }
body.light-mode .gc-desc-content { color: #444; }
body.light-mode .gc-desc-content.collapsed::after { background: linear-gradient(to bottom, transparent, #f0f2f5); }
body.light-mode #gc-dynamic-name { background: rgba(255,255,255,0.8); color: #000; border: 1px solid rgba(0,0,0,0.1); }
/* ๐ฅ Double Glass Card Styles ๐ฅ */
.gc-item {
position: relative;
background: var(--card-bg-layer1) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
border: 1px solid var(--card-border) !important;
border-radius: 12px;
padding: 12px 5px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
display: flex; flex-direction: column; align-items: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
overflow: hidden;
}
.gc-item::before {
content: '';
position: absolute;
inset: 0;
background: var(--card-bg-layer2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: -1;
border-radius: 12px;
}
.gc-item:active { transform: scale(0.95); }
/* Theme Toggle Icon Style */
.theme-toggle-btn {
position: fixed;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--card-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-main);
font-size: 18px;
cursor: pointer;
z-index: 10000;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
transition: 0.3s;
}
body.light-mode .theme-toggle-btn { color: #000; }
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800;900&family=Sora:wght@400;500;600;700;800&display=swap');
/* ๐ฅ App-like Restrictions & Font Styling ๐ฅ */
* {
margin: 0; padding: 0; box-sizing: border-box;
font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
-webkit-touch-callout: none;
}
h2, h3, .sec-title {
text-shadow: 0 0 10px rgba(0, 242, 255, 0.4), 0 0 20px rgba(0, 242, 255, 0.2);
letter-spacing: 0.5px;
}
input, textarea { -webkit-user-select: auto !important; user-select: auto !important; }
img { -webkit-user-drag: none; }
button, a, .qty-btn, .qty-pill, .pay-card-new, .pay-action-btn, .region-tab, .product-item { touch-action: manipulation; }
body {
background: var(--bg-grad);
background-size: cover;
background-attachment: fixed;
color: var(--text-main);
min-height: 100vh;
overflow-x: hidden;
display: flex;
flex-direction: column;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
position: relative;
}
/* โ ๏ธ overscroll-behavior-y:none แแญแฏ body แแพแฌ แแแฌแธแ โ body แ (overflow-x:hidden แแผแฑแฌแแทแบ)
scroll container แแผแ
แบแแฑแแผแฎแธ แแญแฏแแบแแญแฏแแบ scroll แแแแฒแทแกแแซ content แแฒแ touch scroll แแญแฏ
viewport แแฎ chain แแแฏแแบแแฑแธแแฑแฌแทแแฒ Android แแพแฌ scroll แแฏแถแธแ แแฑแแฝแฌแธแแแบ (owner report 2026-08-14)แ
Pull-to-refresh แแญแแบแแปแแบแแฒแท แแฐแแแแบแแฝแแบแแปแแบแกแแฝแแบ root scroller (html) แแพแฌแแฒ แแฌแธแ */
html { overscroll-behavior-y: none; }
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('https://archives.bulbagarden.net/media/upload/thumb/4/45/0094Gengar.png/250px-0094Gengar.png');
background-repeat: no-repeat;
background-position: right 5% bottom 15%;
background-size: 200px auto;
opacity: 0.18;
pointer-events: none;
z-index: 0;
filter: hue-rotate(180deg) brightness(1.3);
}
body::after {
content: '';
position: fixed;
top: 10%; left: -50px;
width: 150px; height: 150px;
background-image: url('https://archives.bulbagarden.net/media/upload/thumb/4/45/0094Gengar.png/250px-0094Gengar.png');
background-repeat: no-repeat;
background-size: contain;
opacity: 0.12;
pointer-events: none;
z-index: 0;
filter: hue-rotate(180deg) brightness(1.2);
transform: scaleX(-1);
}
body > * { position: relative; z-index: 1; }
.container { max-width: 800px; margin: 0 auto; padding: 0 15px; width: 100%; }
/* ๐ฅ FLOATING TOP HEADER (Compact & Aligned) ๐ฅ */
header {
position: fixed; top: 15px; left: 50%; transform: translateX(-50%);
width: 92%; max-width: 365px;
height: 50px;
z-index: 1000;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50px;
padding: 0 15px;
display: flex; justify-content: space-between; align-items: center;
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
box-sizing: border-box;
transition: transform 0.3s ease, opacity 0.3s ease;
}
header.header-hidden {
transform: translateX(-50%) translateY(-120px) !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ๐ฅ HSA STORE Logo (Compact) ๐ฅ */
.logo {
font-size: 16px;
font-weight: 900; color: #fff; cursor: pointer;
letter-spacing: 0.5px; animation: logoAura 2s ease-in-out infinite alternate;
display: flex; align-items: center;
line-height: 1;
}
@keyframes logoAura {
0% { text-shadow: 0 0 5px var(--accent); }
100% { text-shadow: 0 0 15px var(--accent), 0 0 25px var(--accent); }
}
.spin-a {
display: inline-block;
font-weight: 900;
color: #fff;
position: relative;
z-index: 1;
animation: spin3D 3s linear infinite, rgbGlow 6s linear infinite alternate;
}
@keyframes spin3D {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
/* ๐ฅ Rainbow Glass Effect for ฮ only ๐ฅ */
@keyframes rgbGlow {
0% { color: #ff003c; text-shadow: 0 0 10px #ff003c, 0 0 20px #ff003c; }
10% { color: #ff00ff; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; }
20% { color: #8a2be2; text-shadow: 0 0 10px #8a2be2, 0 0 20px #8a2be2; }
30% { color: #4b0082; text-shadow: 0 0 10px #4b0082, 0 0 20px #4b0082; }
40% { color: #0000ff; text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff; }
50% { color: #00bfff; text-shadow: 0 0 10px #00bfff, 0 0 20px #00bfff; }
60% { color: #00ffcc; text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc; }
70% { color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; }
80% { color: #ffff00; text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00; }
90% { color: #ff8c00; text-shadow: 0 0 10px #ff8c00, 0 0 20px #ff8c00; }
100% { color: #ff003c; text-shadow: 0 0 10px #ff003c, 0 0 20px #ff003c; }
}
.user-nav {
display: flex; align-items: center; gap: 10px; height: 100%;
}
.balance-pill {
background: rgba(0, 242, 255, 0.1); border: 1px solid rgba(0, 242, 255, 0.3);
padding: 5px 12px; border-radius: 50px; font-weight: 800;
font-size: 12px; color: var(--accent);
display: none; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 242, 255, 0.1);
height: 32px;
box-sizing: border-box;
}
.btn-login-top {
background: var(--primary-gradient); color: #000; border: none;
padding: 5px 15px; border-radius: 50px; font-weight: 900;
font-size: 12px; cursor: pointer;
height: 32px;
display: flex; align-items: center; justify-content: center;
box-sizing: border-box;
}
.spin-a {
display: inline-block;
font-weight: 900;
color: #fff;
position: relative;
z-index: 1;
animation: spin3D 3s linear infinite, rgbGlow 6s linear infinite alternate;
}
@keyframes spin3D {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
@keyframes rgbGlow {
0% { color: #ff003c; text-shadow: 0 0 10px #ff003c, 0 0 20px #ff003c; } /* Deep Neon Pink */
10% { color: #ff00ff; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; } /* Magenta */
20% { color: #8a2be2; text-shadow: 0 0 10px #8a2be2, 0 0 20px #8a2be2; } /* Blue Violet */
30% { color: #4b0082; text-shadow: 0 0 10px #4b0082, 0 0 20px #4b0082; } /* Indigo */
40% { color: #0000ff; text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff; } /* Pure Blue */
50% { color: #00bfff; text-shadow: 0 0 10px #00bfff, 0 0 20px #00bfff; } /* Deep Sky Blue */
60% { color: #00ffcc; text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc; } /* Cyan Mint */
70% { color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; } /* Lime Green */
80% { color: #ffff00; text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00; } /* Yellow */
90% { color: #ff8c00; text-shadow: 0 0 10px #ff8c00, 0 0 20px #ff8c00; } /* Dark Orange */
100% { color: #ff003c; text-shadow: 0 0 10px #ff003c, 0 0 20px #ff003c; } /* Deep Neon Pink */
}
.user-nav { display: flex; align-items: center; gap: 8px; }
.balance-pill {
position: relative;
background: linear-gradient(135deg, rgba(0, 242, 255, 0.18), rgba(168, 85, 247, 0.14)) !important;
border: 1px solid rgba(0, 242, 255, 0.55) !important;
padding: 5px 13px; border-radius: 8px;
font-family: 'Orbitron', sans-serif !important;
font-weight: 700 !important; font-size: 11px;
letter-spacing: 0.5px;
color: #00f2ff !important;
text-shadow: 0 0 6px rgba(0, 242, 255, 0.7);
display: none; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap;
box-shadow: 0 0 12px rgba(0, 242, 255, 0.35), inset 0 0 8px rgba(0, 242, 255, 0.1);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
overflow: hidden;
transition: box-shadow 0.25s ease, transform 0.15s ease;
}
/* Cyberpunk corner cut + scan line accent */
.balance-pill::before {
content: '';
position: absolute; top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
transform: skewX(-20deg);
animation: balPillScan 3.5s ease-in-out infinite;
}
@keyframes balPillScan {
0%, 70% { left: -60%; }
100% { left: 130%; }
}
.balance-pill:active { transform: scale(0.96); }
.balance-pill i {
color: #a855f7 !important;
text-shadow: 0 0 6px rgba(168, 85, 247, 0.8);
font-size: 12px;
}
#header-bal-text {
font-family: 'Orbitron', sans-serif !important;
font-weight: 900 !important;
}
.btn-login-top { background: rgba(255,255,255,0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; border: 1px solid rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 50px; font-weight: 900; font-size: 11px; cursor: pointer; }
#content-area { flex-grow: 1; padding: 70px 0 90px; }
/* Admin Status */
.admin-status-home { background: rgba(57, 255, 20, 0.1); border: 1px solid rgba(57, 255, 20, 0.3); color: #39ff14; padding: 8px 15px; border-radius: 50px; font-size: 12px; font-weight: bold; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.pulse-dot {
width: 10px; height: 10px;
border-radius: 50%; display: inline-block;
background: #00f2ff; box-shadow: 0 0 10px #00f2ff;
animation: breathe-dot 1.5s ease-in-out infinite alternate !important;
}
@keyframes breathe-dot {
0% { transform: scale(0.8); opacity: 0.5; box-shadow: 0 0 5px #00f2ff; }
100% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 15px #00f2ff; }
}
/* ๐ฅ LIVE PURCHASES FEED ๐ฅ */
.live-wrap { background: var(--glass-bg); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 12px 15px; margin: 16px auto 25px auto; width: 90%; max-width: 340px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); backdrop-filter: blur(4px); }
.live-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
.live-title { font-size: 13px; font-weight: 800; color: var(--accent); display: flex; align-items: center; gap: 5px; text-shadow: 0 0 8px rgba(0,242,255,0.4); }
.live-total { font-size: 11px; font-weight: 900; background: rgba(255, 255, 255, 0.05); color: #39ff14; padding: 4px 10px; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.1); }
.live-feed-container { height: 55px; overflow-y: auto; scrollbar-width: none; }
.live-feed-container::-webkit-scrollbar { display: none; }
.live-feed { display: flex; flex-direction: column; gap: 8px; }
.feed-item { background: rgba(0,0,0,0.3); padding: 10px; border-radius: 12px; display: flex; gap: 10px; align-items: center; border: 1px solid rgba(255,255,255,0.05); }
.feed-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(0, 242, 255, 0.1); color: var(--accent); border-radius: 50%; font-size: 14px; }
.feed-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--accent); }
.feed-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.feed-user { font-size: 12px; font-weight: 900; color: #fff; margin-bottom: 2px; }
.feed-item-name { font-size: 11px; color: var(--text-dim); font-weight: bold; }
.feed-meta { text-align: right; display: flex; flex-direction: column; justify-content: center; }
.feed-time { font-size: 9px; color: #888; margin-bottom: 2px; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; display: inline-block; }
/* โโโ LIVE PURCHASES โ Neon Outline (owner แแฝแฑแธแแฌแธแแฒแท UI #4 ยท 2026-08) โโโ */
.live-wrap .live-title { font-size: 13px !important; font-weight: 900 !important; color: #e9dcff !important; }
.live-wrap .live-title .pulse-dot { background: #c084fc !important; box-shadow: 0 0 10px #c084fc !important; }
.live-feed-container { height: 132px !important; }
.live-feed { gap: 8px !important; }
.feed-item { display: flex; align-items: center; gap: 9px !important; padding: 8px 10px !important;
border-radius: 14px !important; background: #0a0812 !important; border: 1.5px solid #7c3aed !important;
box-shadow: 0 0 14px -3px #7c3aed, inset 0 0 18px -12px #c084fc !important; }
.feed-lgw { position: relative; flex: none; width: 38px; height: 38px; border-radius: 11px; padding: 1.5px;
background: conic-gradient(from 140deg, #8b5cf6, #ec4899, #22d3ee, #8b5cf6); }
/* 2A โ poster แแฑแธแแพแฌ item icon แแฝแแบ (owner แแฝแฑแธ 2026-08) */
.feed-itw { position: relative; flex: none; width: 32px; height: 32px; border-radius: 9px; padding: 1.5px;
margin-left: -5px; background: linear-gradient(135deg, #a855f7, #ec4899); box-shadow: 0 0 8px #a855f766; }
.feed-itw img { width: 100%; height: 100%; border-radius: 7px; object-fit: contain; padding: 3px;
display: block; background: #0d1420; }
.feed-item .feed-avatar, .feed-item .feed-icon { width: 100% !important; height: 100% !important;
border-radius: 9px !important; object-fit: cover; display: block; background: #0d1420 !important;
border: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* MLBB logo โ cover แแฒแทแแผแแบแแแบ แกแแฌแธแแผแแบแแฑแแญแฏแท contain แแฒแท แกแแผแแทแบแแผ */
.feed-item .feed-avatar.feed-av-fit { object-fit: contain !important; padding: 2.5px !important; }
.feed-ltr { position: absolute; right: -5px; bottom: -5px; width: 19px; height: 19px; border-radius: 50%;
border: 2px solid #0a0812; display: flex; align-items: center; justify-content: center;
font-size: 8.5px; font-weight: 900; color: #fff; overflow: hidden; }
.feed-content { flex: 1; min-width: 0; }
.feed-user { font-size: 11.5px !important; font-weight: 900 !important; color: #fff !important;
margin-bottom: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-item-name { font-size: 10px !important; color: #a190c4 !important; font-weight: 400 !important;
margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-meta { text-align: right; flex: none; }
.feed-price { font-size: 12.5px; font-weight: 900; color: #f0abfc; white-space: nowrap; }
.feed-time { font-size: 8.5px !important; color: #6f6390 !important; background: none !important;
padding: 0 !important; margin: 0 !important; white-space: nowrap; }
/* ๐ฅ HIGH MODE ANIMATIONS (From Mini App) ๐ฅ */
@keyframes waveFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes textFlowBlue { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
@keyframes textFlowOrange { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
@keyframes textFlowRed { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
@keyframes textFlowPink { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
/* ๐ฅ Game Posters (Well-proportioned & Full Contained View) ๐ฅ */
.sec-title { font-size: 18px; font-weight: 900; margin-bottom: 15px; text-align: center; }
.game-grid, .hs-search-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 0 auto 30px auto; width: 90%; max-width: 340px; }
.game-card {
background: rgba(25, 30, 45, 0.85);
border-radius: 16px; overflow: hidden;
cursor: pointer; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
transform: translateZ(0);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding-top: 10px;
padding-bottom: 8px;
}
.game-card:active { transform: scale(0.96); filter: brightness(1.2); }
.gm-df .game-info { color:#ff9d3c; }
.game-img-box {
height: 90px;
width: 90%;
display: flex; align-items: center; justify-content: center;
margin-bottom: 4px;
background: rgba(65, 105, 225, 0.06);
border: 1px solid rgba(65, 105, 225, 0.2);
box-shadow: inset 0 0 10px rgba(65, 105, 225, 0.15);
border-radius: 10px;
overflow: hidden;
}
.game-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
pointer-events: none;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
body.lottie-paused .game-info,
body.lottie-paused .game-card {
animation: none !important;
background-position: 0% 0% !important;
}
.gm-mlbb { border: 1px solid rgba(0, 242, 255, 0.8); box-shadow: 0 0 15px rgba(0, 242, 255, 0.4), inset 0 0 10px rgba(0, 242, 255, 0.2); }
.gm-pubg { border: 1px solid rgba(255, 152, 0, 0.8); box-shadow: 0 0 15px rgba(255, 152, 0, 0.4), inset 0 0 10px rgba(255, 152, 0, 0.2); }
.gm-hok { border: 1px solid rgba(255, 23, 68, 0.8); box-shadow: 0 0 15px rgba(255, 23, 68, 0.4), inset 0 0 10px rgba(255, 23, 68, 0.2); }
.gm-roblox { border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.2); }
.gm-wwm { border: 1px solid rgba(170, 170, 170, 0.8); box-shadow: 0 0 15px rgba(170, 170, 170, 0.4), inset 0 0 10px rgba(170, 170, 170, 0.2); }
.gm-genshin { border: 1px solid rgba(0, 191, 255, 0.8); box-shadow: 0 0 15px rgba(0, 191, 255, 0.4), inset 0 0 10px rgba(0, 191, 255, 0.2); }
.gm-heart { border: 1px solid rgba(255, 105, 180, 0.8); box-shadow: 0 0 15px rgba(255, 105, 180, 0.4), inset 0 0 10px rgba(255, 105, 180, 0.2); }
.gm-ff { border: 1px solid rgba(255, 215, 0, 0.8); box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(255, 215, 0, 0.2); }
.gm-magic { border: 1px solid rgba(138, 43, 226, 0.8); box-shadow: 0 0 15px rgba(138, 43, 226, 0.4), inset 0 0 10px rgba(138, 43, 226, 0.2); }
.gm-ssof { border: 1px solid rgba(0, 229, 255, 0.8); box-shadow: 0 0 15px rgba(0, 229, 255, 0.4), inset 0 0 10px rgba(0, 229, 255, 0.2); }
.gm-bs { border: 1px solid rgba(255, 69, 0, 0.8); box-shadow: 0 0 15px rgba(255, 69, 0, 0.4), inset 0 0 10px rgba(255, 69, 0, 0.2); }
/* Game Info Text (Shadow & Color Flow) */
.game-info {
padding: 8px 5px 0 5px; text-align: center; font-size: 13px; font-weight: 900;
background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
will-change: background-position;
text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 9px rgba(0,229,255,0.22);
}
.gm-roblox .game-info { background-image: linear-gradient(90deg, #fff, #fff); -webkit-text-fill-color: #fff; }
/* ๐ mlbb/ff/magic/bs/ssof/pubg/hok/wwm/heart/genshin used to run an infinite gradient-text animation here โ removed (real FPS/battery cost), now plain white like every other game title */
.gm-bigo .game-info, .gm-mlba .game-info, .gm-codm .game-info, .gm-eafc .game-info, .gm-lol .game-info, .gm-wildrift .game-info, .gm-undawn .game-info, .gm-valorant .game-info, .gm-honkai3 .game-info, .gm-lor .game-info, .gm-mlbb2 .game-info, .gm-valorantvp .game-info, .gm-riotcode .game-info,
.gm-gangstar .game-info, .gm-crypto .game-info, .gm-mlbb .game-info, .gm-ff .game-info, .gm-magic .game-info, .gm-bs .game-info, .gm-ssof .game-info, .gm-sojregions .game-info, .gm-capcut .game-info, .gm-pubg .game-info, .gm-hok .game-info, .gm-wwm .game-info, .gm-heart .game-info, .gm-genshin .game-info,
.gm-bigogl .game-info, .gm-codxbox .game-info, .gm-fcxbox .game-info, .gm-fcea .game-info, .gm-pubgpc .game-info, .gm-genshinglb .game-info, .gm-pubgauto .game-info, .gm-newstate .game-info, .gm-hsr .game-info, .gm-mcglb .game-info, .gm-rmlatam .game-info, .gm-rmsea .game-info, .gm-fmp2 .game-info, .gm-acerace1 .game-info, .gm-acerace2 .game-info, .gm-farlight1 .game-info, .gm-farlight2 .game-info, .gm-r6glb .game-info, .gm-r6regions .game-info, .gm-8ballpool .game-info, .gm-asphalt9 .game-info, .gm-nikke .game-info, .gm-miku .game-info, .gm-zzz .game-info, .gm-dna .game-info, .gm-dmc .game-info, .gm-aoe .game-info, .gm-afkj .game-info, .gm-aom .game-info, .gm-ab .game-info, .gm-abi .game-info, .gm-aoveu .game-info, .gm-aovid .game-info, .gm-aovth .game-info, .gm-arknight .game-info, .gm-astral .game-info, .gm-badlanders .game-info, .gm-bladex .game-info, .gm-bleacham .game-info, .gm-bleachsea .game-info, .gm-blockmango .game-info, .gm-crossfirelgd .game-info, .gm-coa .game-info, .gm-destinyrising .game-info, .gm-eggyparty .game-info, .gm-identityv .game-info, .gm-imo .game-info, .gm-lifeafter .game-info, .gm-lifemakeover .game-info, .gm-likee .game-info, .gm-lordsmobile .game-info, .gm-overmortalglb .game-info, .gm-overmortalsea .game-info, .gm-pixelgun3d .game-info, .gm-tomjerry .game-info, .gm-zepeto .game-info, .gm-whiteout .game-info, .gm-tgstar .game-info, .gm-tgprem .game-info, .gm-pubgres .game-info, .gm-tftmb .game-info, .gm-toptop .game-info, .gm-xclash .game-info, .gm-wesing .game-info, .gm-tof .game-info, .gm-tiles .game-info, .gm-tiktokcn .game-info, .gm-divres .game-info, .gm-t3arena .game-info, .gm-supersus .game-info, .gm-stumble .game-info, .gm-sos .game-info, .gm-starmaker .game-info, .gm-starreso .game-info, .gm-springv .game-info, .gm-sololvauto .game-info, .gm-sololv .game-info, .gm-skycotl .game-info, .gm-ragseries .game-info, .gm-qqcoin .game-info, .gm-puzsurv .game-info, .gm-pokeuniteph .game-info, .gm-oxide .game-info, .gm-onmyojia .game-info, .gm-oncehuman .game-info, .gm-msmonsters .game-info, .gm-mongil .game-info, .gm-modstrike .game-info, .gm-mangatoon .game-info, .gm-ludus .game-info, .gm-ludoclub .game-info, .gm-lovenikki .game-info, .gm-lita .game-info, .gm-kingshot .game-info, .gm-kingschoice .game-info, .gm-heroesev .game-info, .gm-hpma .game-info, .gm-haikyu .game-info, .gm-growtopia .game-info, .gm-goldspat .game-info, .gm-fragpro .game-info, .gm-dunkcity .game-info, .gm-crossout .game-info, .gm-catsturbo .game-info, .gm-tsubasa .game-info, .gm-bulletecho .game-info, .gm-azurlane .game-info { background-image:none !important; -webkit-text-fill-color:#fff !important; animation:none !important; }
/* --- Game View & Back Button (Glass Style) --- */
.view-section { display: none; animation: fadeIn 0.3s ease; width: 100%; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.back-nav {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 15px !important;
color: #fff !important;
margin: 12px 0 18px 0 !important;
align-self: flex-start !important;
font-weight: 800 !important;
cursor: pointer !important;
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
padding: 8px 18px !important;
border-radius: 50px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
transition: all 0.2s ease !important;
}
.back-nav i { display:none !important; }
.back-nav{
position: relative !important;
border-radius: 12px !important;
padding: 10px 18px 10px 14px !important;
background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
border: 1px solid rgba(255,255,255,.16) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 14px rgba(0,0,0,.28) !important;
letter-spacing: .3px !important;
gap: 9px !important;
transition: transform .14s ease, background .18s ease, border-color .18s ease !important;
overflow: hidden !important;
}
.back-nav::before{
content:"" !important;
width: 15px !important; height: 15px !important;
flex: 0 0 15px !important;
background: currentColor !important;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain !important;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain !important;
transition: transform .18s cubic-bezier(.2,.8,.2,1) !important;
}
.back-nav::after{
content:"" !important;
position:absolute !important; top:0 !important; left:14px !important; right:14px !important; height:1px !important;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent) !important;
pointer-events:none !important;
}
.back-nav:hover::before{ transform: translateX(-3px) !important; }
.back-nav:active{
transform: scale(.95) !important;
background: linear-gradient(135deg, rgba(0,242,255,.16), rgba(0,242,255,.06)) !important;
border-color: rgba(0,242,255,.42) !important;
}
.back-nav:active::before{ transform: translateX(-4px) !important; }
body.hsa-pkmn .back-nav{
background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important;
border: 2px solid rgba(20,30,80,.28) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 rgba(20,30,80,.28) !important;
border-radius: 10px !important;
}
body.hsa-pkmn .back-nav:active{
transform: translateY(2px) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(20,30,80,.28) !important;
}
.back-nav:active {
transform: scale(0.92) !important;
background: rgba(0, 242, 255, 0.15) !important;
border-color: var(--accent) !important;
color: var(--accent) !important;
}
#view-title {
text-align: center; font-size: 18px; font-weight: 900;
margin: 0 auto 20px auto;
padding: 8px 25px;
background: var(--glass-bg);
backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
display: table;
color: #fff;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
/* Region Tabs */
.region-bar {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
padding-bottom: 10px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.region-bar::-webkit-scrollbar { display: none; }
.region-tab { background: var(--glass-bg); border: 1px solid rgba(255, 255, 255, 0.1); padding: 8px 16px; border-radius: 50px; font-size: 12px; font-weight: bold; cursor: pointer; color: #fff; }
.region-tab.active { background: var(--accent); color: #000; border-color: var(--accent); box-shadow: 0 0 12px rgba(0, 242, 255, 0.4); }
/* ๐ฅ Category Title Box Styles ๐ฅ */
/* โ๏ธ category section โ ice glass (owner 2026-08-20) */
.cat-sec{
position:relative; border-radius:20px; padding:12px 12px 14px; margin:16px 0 18px;
background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
border:1px solid rgba(255,255,255,.13);
box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 28px rgba(0,0,0,.28);
backdrop-filter: blur(9px) saturate(1.15); -webkit-backdrop-filter: blur(9px) saturate(1.15);
}
.cat-sec::before{
content:""; position:absolute; left:0; right:0; top:0; height:2px; border-radius:20px 20px 0 0;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
}
.cat-sec .product-grid{ margin-top:2px; }
/* item card แแฝแฑแแแบแธ แกแฏแแบแ
แฏแแฒแท แกแแฑแฌแแบแแฒแท แแญแฏแแบแกแฑแฌแแบ (owner 2026-08-21) */
.cat-sec.sec-pass .product-item{
border-color:rgba(255,196,0,.34);
background:linear-gradient(180deg, rgba(60,45,10,.55), rgba(25,30,45,.88));
box-shadow:0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,196,0,.18);
}
.cat-sec.sec-first .product-item{
border-color:rgba(255,0,127,.34);
background:linear-gradient(180deg, rgba(60,10,35,.55), rgba(25,30,45,.88));
box-shadow:0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,0,127,.18);
}
.cat-sec.sec-reg .product-item{
border-color:rgba(0,234,255,.30);
background:linear-gradient(180deg, rgba(6,45,58,.55), rgba(25,30,45,.88));
box-shadow:0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(0,234,255,.16);
}
/* แแฝแฑแธแแฌแธแแฒแท card แแแฑแฌแท แแฐแแแบแธ accent แกแแญแฏแแบแธ แแปแแบแ
แฑ */
.cat-sec .product-item.selected{
border-color:var(--accent) !important;
background:rgba(0,242,255,.15) !important;
box-shadow:0 0 15px rgba(0,242,255,.3) !important;
}
/* แกแฏแแบแ
แฏแกแแญแฏแแบ แกแแฑแฌแแบ แกแแแบแธแแแบ แแฝแฒแกแฑแฌแแบ */
.cat-sec.sec-pass{ border-color:rgba(255,196,0,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 22px rgba(255,196,0,.08), 0 10px 28px rgba(0,0,0,.28); }
.cat-sec.sec-first{ border-color:rgba(255,0,127,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 22px rgba(255,0,127,.08), 0 10px 28px rgba(0,0,0,.28); }
.cat-sec.sec-reg{ border-color:rgba(0,234,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 22px rgba(0,234,255,.08), 0 10px 28px rgba(0,0,0,.28); }
.cat-header {
font-size: 13px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 900;
margin: 25px 0 15px 0; white-space: nowrap;
text-align: left;
padding: 8px 15px;
border-radius: 10px;
display: inline-block;
background: var(--glass-bg);
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
letter-spacing: 0.5px;
color: #fff; /* Default color */
}
.cat-pass { color: #e0b0ff !important; border-left: 4px solid #e0b0ff !important; text-shadow: 0 0 8px rgba(224, 176, 255, 0.8) !important; }
.cat-first { color: #ff9999 !important; border-left: 4px solid #ff9999 !important; text-shadow: 0 0 8px rgba(255, 153, 153, 0.8) !important; }
.cat-reg { color: #87ceeb !important; border-left: 4px solid #87ceeb !important; text-shadow: 0 0 8px rgba(135, 206, 235, 0.8) !important; }
.cat-default { color: #ffffff !important; border-left: 4px solid #ffffff !important; text-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important; }
/* Region Tabs (Scrollable Fix) */
.region-bar {
display: flex !important;
justify-content: flex-start !important;
gap: 10px !important;
margin-bottom: 20px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
padding-bottom: 10px !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
touch-action: pan-x !important;
}
.region-bar::-webkit-scrollbar { display: none !important; }
.region-tab {
flex-shrink: 0 !important;
white-space: nowrap !important;
background: var(--glass-bg); border: 1px solid rgba(255, 255, 255, 0.1); padding: 8px 16px; border-radius: 50px; font-size: 12px; font-weight: bold; cursor: pointer; color: #fff;
}
.region-tab.active { background: var(--accent); color: #000; border-color: var(--accent); box-shadow: 0 0 12px rgba(0, 242, 255, 0.4); }
/* ID Card (PURE GLASS) */
.id-card {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
padding: 10px 12px;
border-radius: 14px; border: var(--border-glow);
margin: 0 auto 15px auto; width: 90%; max-width: 340px; box-shadow: 0 4px 15px rgba(0, 242, 255, 0.15);
transition: all 0.3s ease;
}
.id-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 6px;
font-size: 11px; color: var(--text-dim); font-weight: bold;
}
.input-row {
display: flex; justify-content: center; gap: 6px;
margin-bottom: 8px;
}
/* ๐ฅ Pure Invisible Inputs (Neon Cyan Text) ๐ฅ */
input, .id-card input, .id-card.has-custom-bg input {
background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: none !important;
padding: 9px 12px; border-radius: 10px; outline: none; width: 100%; transition: all 0.3s ease; letter-spacing: 1px;
color: #fff !important; font-size: 15px; font-weight: 900 !important;
text-shadow: none !important;
}
input::placeholder, .id-card input::placeholder, .id-card.has-custom-bg input::placeholder {
color: rgba(255, 255, 255, 0.6) !important; text-shadow: 0 0 5px rgba(255,255,255,0.4) !important; font-weight: 800 !important; letter-spacing: normal;
}
input:focus, .id-card input:focus, .id-card.has-custom-bg input:focus {
background: transparent !important; border-color: rgba(255, 255, 255, 0.4) !important;
box-shadow: none !important;
}
/* ๐ฅ Verify Buttons (Compact & Centered) ๐ฅ */
.action-row {
display: flex;
gap: 10px;
justify-content: center;
}
.btn-check { width: 100px; background: rgba(0, 242, 255, 0.1); color: var(--accent); border: 1px solid rgba(0, 242, 255, 0.5); border-radius: 8px; font-weight: 900; font-size: 12px; padding: 8px; cursor: pointer; box-shadow: 0 0 10px rgba(0,242,255,0.2); backdrop-filter: blur(5px); }
.btn-paste { width: 75px; background: rgba(255, 255, 255, 0.05); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; font-weight: bold; font-size: 11px; padding: 8px; cursor: pointer; backdrop-filter: blur(5px); }
#ign-display {
text-align: center; font-size: 13px; font-weight: bold;
margin-top: 6px;
min-height: 16px; color: #39ff14;
}
.action-row {
display: flex;
gap: 6px;
justify-content: space-between;
align-items: center;
width: 100%;
height: 40px;
margin-bottom: 10px;
}
.btn-check, .btn-paste, .bypass-compact-ui {
height: 100%; margin: 0 !important; display: flex; align-items: center; justify-content: center;
border-radius: 10px !important;
background: rgba(0, 255, 255, 0.08) !important;
border: 1px solid #00ffff !important;
box-shadow: 0 0 8px rgba(0, 255, 255, 0.3), inset 0 0 5px rgba(0, 255, 255, 0.2) !important;
color: #ffffff !important;
font-weight: 900 !important; font-size: 11px !important;
text-shadow: 0 0 4px #ffffff, 0 0 8px rgba(255, 255, 255, 0.5) !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
transition: all 0.3s ease !important;
cursor: pointer;
width: auto !important;
}
.btn-check { flex: 1.3; padding: 0; }
.btn-paste { flex: 1; padding: 0; gap: 4px; }
.bypass-compact-ui { flex: 1.4; justify-content: space-evenly !important; padding: 0 4px !important; cursor: default; }
.btn-check:active, .btn-paste:active {
background: rgba(0, 255, 255, 0.15) !important;
box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), inset 0 0 8px rgba(0, 255, 255, 0.3) !important;
transform: scale(0.95);
}
.bypass-switch {
position: relative; width: 28px; height: 16px; margin: 0; display: inline-block; cursor: pointer;
}
.bypass-switch input { display: none; }
.bypass-switch .b-slider {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px; transition: .3s;
}
.bypass-switch .b-slider::before {
position: absolute; content: ""; height: 10px; width: 10px;
left: 2px; bottom: 2px; background-color: #aaa;
border-radius: 50%; transition: .3s;
}
.bypass-switch input:checked + .b-slider {
background-color: rgba(57, 255, 20, 0.2); border-color: #39ff14; box-shadow: inset 0 0 5px rgba(57, 255, 20, 0.4);
}
.bypass-switch input:checked + .b-slider::before {
transform: translateX(12px); background-color: #39ff14; box-shadow: 0 0 8px #39ff14;
}
#ign-display {
text-align: center; font-size: 13px; font-weight: bold;
margin-top: 8px; min-height: 18px; color: #39ff14;
}
/* ๐ฅ Diamond Items (Categorized Layout - Fixed Proportions) ๐ฅ */
.product-list { width: 90%; max-width: 340px; margin: 0 auto; padding-bottom: 30px; }
@keyframes title-breath {
0%, 100% { opacity: 1; filter: brightness(1.2); }
50% { opacity: 0.7; filter: brightness(0.8); }
}
/* ๐ฅ Category Title Box Styles (Compact, No Line & Breathing) ๐ฅ */
.cat-header {
font-size: 12px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 900;
margin: 15px 0 10px 0; white-space: nowrap;
text-align: left;
padding: 6px 12px;
border-radius: 8px;
display: inline-block;
background: var(--glass-bg);
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
letter-spacing: 0.5px;
animation: title-breath 2.5s infinite ease-in-out;
}
.cat-pass { color: #e0b0ff !important; border-left: none !important; text-shadow: 0 0 8px rgba(224, 176, 255, 0.8) !important; }
.cat-first { color: #ff9999 !important; border-left: none !important; text-shadow: 0 0 8px rgba(255, 153, 153, 0.8) !important; }
.cat-reg { color: #87ceeb !important; border-left: none !important; text-shadow: 0 0 8px rgba(135, 206, 235, 0.8) !important; }
.cat-default { color: #ffffff !important; border-left: none !important; text-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important; }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width: 100%; }
body.pin-filter-on .product-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; }
.p-img.wide-img,
body.hsa-pkmn .product-item .p-img.wide-img,
#product-view .product-item .p-img.wide-img,
.product-item .p-img.wide-img {
width: 100% !important;
max-width: 132px !important;
height: 74px !important;
object-fit: cover !important;
border-radius: 9px !important;
margin: 0 auto 8px auto !important;
box-shadow: 0 3px 10px rgba(0,0,0,0.45) !important;
}
.heart-big {
width: 50px !important;
height: 50px !important;
object-fit: contain !important;
margin: 0 auto 8px auto !important;
filter: drop-shadow(0 0 10px rgba(255, 100, 150, 0.5)) !important;
}
.heart-card-fix {
padding: 12px 8px !important;
min-height: 140px !important;
}
/* ๐ซ MLBB Pass แแฏแถ โ mini app แแญแฏแแปแญแฏแธ แแผแฎแธแแผแฎแธ (owner 2026-08-29) */
html body .product-item .p-img.pass-big, html body #product-view .product-item .p-img.pass-big{
/* โ ๏ธ height แ แแแผแฌแธ card แแฒแท แแฐแกแฑแฌแแบ 62px โ แแฏแถแแญแฏแแฒ scale แแฒแท แแผแฎแธแ
แฑแแแบ (card แแแพแแบแ
แฑแ ยท owner 2026-08-29) */
width: 100% !important; height: 62px !important; object-fit: contain !important;
transform: scale(1.55) !important; margin: 0 auto 4px auto !important;
filter: drop-shadow(0 6px 12px rgba(0,0,0,.6)) !important;
}
.diamond-big {
width: 62px !important;
height: 62px !important;
object-fit: contain !important;
margin: 0 auto 4px auto !important;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)) !important;
}
.product-item {
background: rgba(25, 30, 45, 0.85);
border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px;
padding: 8px 6px !important;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
min-height: auto !important;
}
.product-item.selected { border-color: var(--accent); background: rgba(0, 242, 255, 0.15); box-shadow: 0 0 15px rgba(0, 242, 255, 0.3); transform: scale(0.96); }
/* Image Size - 60px accommodated nicely */
.p-img { width: 55px; height: 55px; object-fit: contain; margin-bottom: 6px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)); transform: none !important; }
/* Item Name (Boxed Style) */
.p-name {
font-size: 11px; color: #87cefa; font-weight: 800;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 90%; /* Prevent expanding beyond card width */
padding: 3px 8px;
background: rgba(135, 206, 250, 0.15);
border: 1px solid rgba(135, 206, 250, 0.25);
border-radius: 6px;
display: inline-block;
margin-bottom: 2px;
}
/* Item Price */
.p-price { font-size: 14px; font-weight: 900; color: #fff; margin-top: 4px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
/* ๐ฅ DISCOUNT PRICE UI STYLES ๐ฅ */
.price-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 34px; }
.p-price-old { font-size: 11px; color: #ff4444; text-decoration: line-through; font-weight: 700; margin-bottom: -2px; text-shadow: none; opacity: 0.8; }
.p-price-new { font-size: 14px; font-weight: 900; color: #39ff14; text-shadow: 0 0 8px rgba(57, 255, 20, 0.4); margin-top: 0; }
.p-price-normal { font-size: 14px; font-weight: 900; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.8); }
/* Profile Page */
.profile-wrap { width: 90%; max-width: 340px; margin: 0 auto; background: var(--glass-bg); padding: 30px 20px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); text-align: center; backdrop-filter: blur(15px); }
.pro-avatar { width: 80px; height: 80px; background: var(--primary-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 35px; color: #000; margin: 0 auto 15px; position: relative; overflow: hidden; cursor: pointer; }
.pro-name { font-size: 20px; font-weight: 900; margin-bottom: 5px; }
.pro-bal { font-size: 26px; color: var(--accent); font-weight: 900; margin: 15px 0 25px; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 12px; border: 1px solid rgba(0, 242, 255, 0.2); }
.pro-btn { width: 100%; padding: 14px; border-radius: 10px; font-weight: bold; font-size: 14px; border: none; cursor: pointer; margin-bottom: 10px; }
.pro-btn-pass { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); }
.pro-btn-out { background: rgba(255, 51, 51, 0.15); color: #ff4d4d; border: 1px solid rgba(255, 51, 51, 0.3); }
/* ๐ฅ PREMIUM WALLET DEPOSIT UI ๐ฅ */
.wallet-wrap { width: 85%; max-width: 320px; margin: 0 auto; background: var(--glass-bg); padding: 20px 15px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.note-box { background: rgba(255, 51, 51, 0.1); border: 1px solid rgba(255,51,51,0.3); border-radius: 12px; margin-bottom: 15px; overflow: hidden; text-align: left; }
.note-header { padding: 12px 15px; color: #ff4d4d; font-size: 11px; font-weight: bold; }
.pay-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.pay-card-new { display: flex; align-items: center; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 10px 12px; cursor: pointer; transition: 0.3s; user-select: none; -webkit-user-select: none; }
.pay-card-new.active { border-color: var(--accent); background: rgba(0, 242, 255, 0.08); box-shadow: 0 0 10px rgba(0, 242, 255, 0.15); transform: scale(0.98); }
.pay-logo-new { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; margin-right: 12px; pointer-events: none; }
.pay-info-new { flex: 1; text-align: left; pointer-events: none; }
.pay-num-new { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: 1px; margin-bottom: 2px; user-select: none; -webkit-user-select: none;}
.pay-name-new { font-size: 10px; color: var(--text-dim); }
.pay-actions { display: flex; gap: 5px; }
.pay-action-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); width: 32px; height: 32px; border-radius: 8px; color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; font-size: 14px; }
.pay-action-btn:active { background: var(--accent); color: #000; transform: scale(0.9); }
.amt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 15px; }
.amt-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 10px 0; border-radius: 8px; font-size: 11px; font-weight: bold; cursor: pointer; user-select: none; -webkit-user-select: none;}
.amt-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
.upload-btn { background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.3); padding: 15px; border-radius: 12px; width: 100%; color: #fff; cursor: pointer; font-size: 13px; margin-bottom: 15px; text-align: center; display: block; }
/* ๐ฅ FLOATING CLEAR GLASS BOTTOM NAV (Apple iOS Style) ๐ฅ */
.bottom-nav {
position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
width: 88%; max-width: 342px; box-sizing: border-box; height: 60px;
display: flex; justify-content: space-between; align-items: center; padding: 0 18px;
z-index: 1000; border-radius: 40px;
will-change: transform, opacity;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
background: rgba(20, 25, 30, 0.85);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 25px rgba(0,0,0,0.2), inset 0 0 15px rgba(255,255,255,0.1);
}
.bottom-nav.nav-hidden {
transform: translateX(-50%) translateY(120px);
opacity: 0;
pointer-events: none;
}
/* ๐ฅ Nav Tab ๐ฅ */
.nav-tab {
color: rgba(255, 255, 255, 0.7); cursor: pointer; text-align: center;
font-size: 11px; font-weight: 800;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; transition: 0.3s; z-index: 2; position: relative;
}
.nav-tab i { font-size: 20px; }
.nav-tab.active { color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); }
.lottie-nav-icon {
width: 28px; height: 28px;
filter: invert(1) opacity(0.6) drop-shadow(0 0 3px var(--accent));
transition: 0.3s;
}
.nav-tab.active .lottie-nav-icon {
filter: invert(1) opacity(1) drop-shadow(0 0 8px var(--accent));
}
.nav-profile-box {
width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
border: 2px solid rgba(255,255,255,0.2); transition: 0.3s;
box-shadow: 0 2px 5px rgba(0,0,0,0.5); margin-bottom: 2px;
}
.nav-tab.active .nav-profile-box {
border-color: var(--accent); box-shadow: 0 0 8px var(--accent);
}
.nav-center-wrapper {
position: absolute; left: 50%; transform: translateX(-50%);
width: 60px; height: 100%; display: flex; justify-content: center; z-index: 3;
}
.nav-center-btn {
position: absolute; top: -18px; width: 55px; height: 55px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(15px) saturate(150%); -webkit-backdrop-filter: blur(15px) saturate(150%);
border-radius: 50%;
display: flex; align-items: center; justify-content: center; flex-direction: column;
color: rgba(255, 255, 255, 0.9); font-size: 11px; font-weight: 800;
border: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer; transition: 0.2s;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.nav-center-btn::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: rgba(255,255,255,0.95);
border-right-color: rgba(255,255,255,0.95);
box-shadow: 0 0 10px rgba(255,255,255,0.6);
animation: spinBorder 1.5s linear infinite;
z-index: -1;
pointer-events: none;
will-change: transform;
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.nav-center-btn::after { display: none; }
@keyframes spinBorder {
from { transform: translateZ(0) rotate(0deg); }
to { transform: translateZ(0) rotate(360deg); }
}
.nav-center-btn i { font-size: 18px; margin-bottom: 2px; color: rgba(255,255,255,0.95); text-shadow: 0 0 8px rgba(255,255,255,0.6); z-index: 1; }
.nav-center-btn span { z-index: 1; position: relative; }
.nav-center-btn.active {
color: rgba(255,255,255,0.95);
background: rgba(255,255,255,0.1);
box-shadow: 0 0 15px rgba(255,255,255,0.35);
}
.nav-center-btn.active i { color: rgba(255,255,255,0.95); text-shadow: 0 0 8px rgba(255,255,255,0.6); }
/* ๐ฅ ULTRA CLEAR GLASS MORE POPUP (Position Fixed) ๐ฅ */
#more-popup {
position: fixed; bottom: 85px; right: 50%; margin-right: -135px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px);
border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 18px;
padding: 8px; display: none; flex-direction: column; gap: 6px;
z-index: 999; box-shadow: 0 15px 40px rgba(0,0,0,0.6), inset 0 0 10px rgba(255,255,255,0.05);
opacity: 0; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-origin: bottom center; transform: scale(0.9);
}
#more-popup.show { transform: scale(1); opacity: 1; display: flex; }
.more-item { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 13px; font-weight: 800; padding: 12px 20px; border-radius: 12px; cursor: pointer; transition: 0.2s; background: rgba(0,0,0,0.2); border: 1px solid transparent; white-space: nowrap; }
.more-item:active { background: rgba(0, 242, 255, 0.1); border-color: rgba(0, 242, 255, 0.3); transform: scale(0.96); }
.more-item i { color: var(--accent); font-size: 16px; width: 20px; text-align: center; filter: drop-shadow(0 0 4px rgba(0,242,255,0.4)); }
/* ๐ฅ Floating Checkout Bar (Dark Premium Glass) ๐ฅ */
#checkout-bar {
position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); width: 92%; max-width: 380px;
background: rgba(10, 10, 15, 0.5);
backdrop-filter: blur(25px) saturate(120%); -webkit-backdrop-filter: blur(25px) saturate(120%);
padding: 12px 18px; border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.1);
display: none; flex-direction: column; gap: 8px; z-index: 1001;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}
/* โจ Apple liquid-glass specular sheen (same as search modal) โ follows tilt/touch. */
#checkout-bar { --gx: 50%; --gy: 0%; }
#gc-buy-modal .gc-glass-panel { position: relative; --gx: 50%; --gy: 0%; }
#checkout-bar::before, #gc-buy-modal .gc-glass-panel::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
pointer-events: none; z-index: 3; padding: 1.6px;
background: radial-gradient(160px 160px at var(--gx) var(--gy),
rgba(255,255,255,1), rgba(255,255,255,0.55) 40%, rgba(255,255,255,0) 72%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
/* ๐ฅ Close Button Bar ๐ฅ */
.checkout-close-bar {
display: flex; justify-content: flex-end; width: 100%; margin-bottom: -5px;
}
.btn-close-checkout {
background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff; border-radius: 50px; padding: 4px 12px; font-size: 11px; font-weight: bold;
cursor: pointer; display: flex; align-items: center; gap: 5px; transition: 0.2s;
}
.btn-close-checkout:active { background: rgba(255, 51, 51, 0.2); border-color: rgba(255, 51, 51, 0.5); }
.qty-row { display: flex; justify-content: space-between; align-items: center; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 7px; }
.qty-controls { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.4); padding: 5px; border-radius: 50px; }
.qty-btn { background: rgba(255,255,255,0.1); color: #fff; border: none; width: 28px; height: 28px; border-radius: 50%; font-weight: bold; cursor: pointer; transition: 0.2s; }
.qty-btn:active { background: var(--accent); color: #000; }
.qty-pill { background: rgba(255,255,255,0.1); color: #fff; border: none; padding: 6px 12px; border-radius: 50px; font-size: 12px; font-weight:bold; cursor: pointer; transition: 0.2s; }
.qty-pill:active { background: var(--accent); color: #000; }
.btn-buy-now {
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.02));
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.4);
padding: 10px 24px;
border-radius: 12px;
font-weight: 900; cursor: pointer; font-size: 13px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: 0.2s;
}
.btn-buy-now:active { background: rgba(255,255,255,0.2); color: #fff; transform: scale(0.93); }
/* Modals */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); z-index: 2000; justify-content: center; align-items: center; backdrop-filter: blur(5px); padding: 15px; }
.modal-card { background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(20px); width: 100%; max-width: 350px; padding: 25px; border-radius: 20px; border: 1px solid rgba(0, 242, 255, 0.3); position: relative; text-align: center; box-shadow: 0 10px 40px rgba(0, 242, 255, 0.15); }
.close-modal { position: absolute; top: 15px; right: 15px; color: #888; font-size: 20px; cursor: pointer; }
.input-group { margin-bottom: 12px; text-align: left; }
.btn-main { width: 100%; padding: 14px; background: var(--primary-gradient); color: #000; border: none; border-radius: 12px; font-size: 14px; font-weight: 900; cursor: pointer; margin-top: 5px; }
/* ===== ๐ฅ PURE GLASS FULL-PAGE LOGIN UI ===== */
#auth-page {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
inset: 0;
z-index: 2147483646;
background: var(--bg-grad);
background-size: cover;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 0;
touch-action: pan-y;
}
#auth-page::before {
content: '';
position: absolute;
inset: 0;
background: rgba(10, 16, 30, 0.5);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: 0;
pointer-events: none;
}
#auth-page.open { display: block; }
#auth-page .auth-wrap { position: relative; z-index: 1; }
.auth-wrap {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px 18px 40px;
}
/* Google + Telegram side by side */
.auth-social-row {
display: flex;
gap: 10px;
align-items: stretch;
margin-bottom: 12px;
}
.auth-social-row .auth-social-btn { margin-bottom: 0; flex: 0 0 auto; width: 56px; padding: 13px 0; }
.auth-social-row .auth-tg-wrap { flex: 1; display: flex; align-items: center; }
.auth-card {
width: 100%;
max-width: 360px;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 22px;
padding: 32px 30px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}
.auth-back {
position: fixed;
top: 78px;
left: 16px;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1000000;
}
/* ===== ๐ป PC / Desktop view โ wider, centered, comfortable ===== */
@media (min-width: 768px) {
.auth-card { max-width: 440px; padding: 40px 38px; border-radius: 26px; }
.auth-logo { width: 76px; height: 76px; }
.auth-title { font-size: 26px; }
.auth-sub { font-size: 14px; margin-bottom: 28px; }
.auth-field input { padding: 16px 46px 16px 42px !important; font-size: 15px; }
.auth-btn { padding: 16px; font-size: 16px; }
.auth-back { top: 24px; left: 24px; width: 46px; height: 46px; font-size: 18px; }
}
/* ===== ๐ฑ Phone view ===== */
@media (max-width: 767px) {
.auth-card { max-width: 330px; padding: 26px 22px; }
.auth-social-row .auth-social-btn i { font-size: 20px; }
.auth-tg-wrap { transform: scale(0.9); transform-origin: left center; overflow: hidden; }
}
.auth-logo {
width: 64px; height: 64px;
border-radius: 18px;
margin: 0 auto 14px;
display: block;
object-fit: cover;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.05);
}
.auth-title {
color: #fff;
font-size: 22px;
font-weight: 800;
text-align: center;
margin-bottom: 4px;
text-shadow: none;
letter-spacing: 0.3px;
}
.auth-sub {
color: rgba(255,255,255,0.65);
font-size: 13px;
text-align: center;
margin-bottom: 24px;
font-weight: 500;
}
/* Input field (glass, no color, white text) */
.auth-field {
position: relative;
margin-bottom: 14px;
}
.auth-field .auth-ico {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: rgba(255,255,255,0.5);
font-size: 14px;
pointer-events: none;
}
.auth-field input {
width: 100%;
background: rgba(255,255,255,0.05) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 12px;
padding: 14px 44px 14px 40px !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-size: 14px;
font-weight: 600 !important;
letter-spacing: 0.3px !important;
text-shadow: none !important;
outline: none;
transition: all 0.25s ease;
box-shadow: none !important;
}
.auth-field input::placeholder {
color: rgba(255,255,255,0.45) !important;
text-shadow: none !important;
font-weight: 500 !important;
}
.auth-field input:focus {
border-color: rgba(255,255,255,0.4) !important;
background: rgba(255,255,255,0.09) !important;
box-shadow: none !important;
}
.auth-field .auth-eye {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: rgba(255,255,255,0.6);
font-size: 15px;
cursor: pointer;
padding: 6px;
z-index: 2;
}
/* Gmail suggestion chip */
.auth-gmail-hint {
display: none;
margin: -8px 0 14px;
padding: 8px 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 10px;
color: rgba(255,255,255,0.85);
font-size: 12px;
cursor: pointer;
font-weight: 600;
}
.auth-gmail-hint.show { display: block; }
.auth-gmail-hint b { color: #fff; }
/* Primary button (glass white, no color) */
.auth-btn {
width: 100%;
padding: 15px;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 12px;
color: #fff;
font-size: 15px;
font-weight: 800;
cursor: pointer;
margin-top: 6px;
transition: all 0.2s ease;
letter-spacing: 0.3px;
}
.auth-btn:active { transform: scale(0.97); background: rgba(255,255,255,0.18); }
.auth-btn:disabled { opacity: 0.55; cursor: default; }
/* Secondary social buttons */
.auth-social-btn {
width: 100%;
padding: 13px;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 12px;
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 12px;
transition: all 0.2s ease;
}
.auth-social-btn:active { transform: scale(0.98); }
.auth-social-btn i { font-size: 17px; }
/* Divider */
.auth-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0;
color: rgba(255,255,255,0.4);
font-size: 11px;
font-weight: 600;
}
.auth-divider::before, .auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(255,255,255,0.12);
}
/* Bottom switch link */
.auth-switch {
text-align: center;
margin-top: 18px;
font-size: 13px;
color: rgba(255,255,255,0.6);
font-weight: 500;
}
.auth-switch span {
color: #fff;
font-weight: 800;
cursor: pointer;
text-decoration: underline;
}
/* OTP row */
.auth-otp-row { display: none; gap: 8px; align-items: center; margin-bottom: 14px; }
.auth-otp-row.show { display: flex; }
.auth-otp-row input {
flex: 1;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 12px;
padding: 14px !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-size: 16px;
font-weight: 700 !important;
letter-spacing: 4px !important;
text-align: center;
text-shadow: none !important;
outline: none;
}
.auth-otp-row .auth-resend {
background: rgba(255,255,255,0.06);
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 10px;
padding: 12px 14px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.auth-tg-wrap { display: flex; justify-content: center; }
/* ===== END GLASS LOGIN UI ===== */
.recent-list { max-height: 250px; overflow-y: auto; text-align: left; margin-top: 15px; }
.recent-item { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 13px; cursor: pointer; display:flex; justify-content:space-between;}
/* QR Modal */
#qr-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:20000; justify-content:center; align-items:center; backdrop-filter:blur(5px); }
#qr-img-display { width:250px; border-radius:15px; border:2px solid #fff; box-shadow:0 0 25px rgba(255,255,255,0.2); }
/* Custom Toast Notification */
#custom-toast { position: fixed; bottom: -50px; left: 50%; transform: translateX(-50%); background: rgba(20,20,20,0.9); border: 1px solid var(--accent); color: #fff; padding: 10px 20px; border-radius: 30px; font-size: 13px; font-weight: bold; z-index: 2147483647; opacity: 0; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.5); backdrop-filter: blur(5px); white-space: nowrap; pointer-events: none; }
.hist-date-header {
background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
padding: 10px 15px; border-radius: 10px; display: flex; justify-content: space-between;
align-items: center; color: var(--accent); font-size: 13px; font-weight: bold;
cursor: pointer; margin-bottom: 5px; margin-top: 10px; backdrop-filter: blur(5px);
}
#history-view, #saved-view, #admin-dash-view, #price-list-view, #notification-view, #admin-post-view {
margin-top: 0 !important;
padding-top: 80px !important;
min-height: 100vh;
background: var(--bg-grad);
}
body.hsa-admin-bg #history-view,
body.hsa-admin-bg #saved-view,
body.hsa-admin-bg #admin-dash-view,
body.hsa-admin-bg #price-list-view,
body.hsa-admin-bg #notification-view,
body.hsa-admin-bg #admin-post-view {
background: transparent !important;
}
body.hsa-admin-bg #history-view,
body.hsa-admin-bg #saved-view,
body.hsa-admin-bg #admin-dash-view,
body.hsa-admin-bg #price-list-view,
body.hsa-admin-bg #notification-view,
body.hsa-admin-bg #admin-post-view {
background: transparent !important;
}
.hist-back-row { display: flex; align-items: center; margin-bottom: 5px; }
.hist-date-header i { transition: transform 0.3s; }
.hist-date-header.active i { transform: rotate(180deg); }
.hist-items-container {
display: none; flex-direction: column; gap: 8px; margin-bottom: 10px;
padding-left: 5px; border-left: 2px solid rgba(255,255,255,0.1); margin-left: 5px;
}
.save-btn-card {
position: absolute; top: 38px; right: 10px;
z-index: 10; color: rgba(255,255,255,0.3);
font-size: 18px; cursor: pointer; transition: 0.2s;
}
.save-btn-card.active { color: #ff3366; }
.pin-glyph-box { display: none; }
body.pin-mode-on .save-btn-card svg { display: none; }
body.pin-mode-on .save-btn-card .pin-glyph-box {
display: flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 7px;
background: linear-gradient(160deg, #ffffff, #eef2f8);
border: 2px solid #1b2a5c;
box-shadow: 0 2px 0 #1b2a5c, 0 3px 6px rgba(0,0,0,0.3);
}
body.pin-mode-on .save-btn-card .pin-glyph-box i { color: #1b2a5c !important; font-size: 12px; }
.pin-mode-btn {
cursor: pointer; display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
background: linear-gradient(160deg, #ffffff, #eef2f8);
border: 2px solid #1b2a5c; color: #1b2a5c !important; font-size: 15px;
box-shadow: 0 2px 0 #1b2a5c, 0 4px 8px rgba(0,0,0,0.28);
transition: 0.2s;
}
.pin-mode-btn.active { background: linear-gradient(160deg, #ffd83d, #ffb302); }
.pin-mode-btn:active { transform: scale(0.88); box-shadow: 0 1px 0 #1b2a5c, 0 2px 4px rgba(0,0,0,0.28); }
.pin-count-box {
cursor: pointer; display: flex; align-items: center; justify-content: center;
min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; flex-shrink: 0;
background: linear-gradient(160deg, #ffffff, #eef2f8);
border: 2px solid #1b2a5c; color: #1b2a5c !important; font-size: 14px; font-weight: 900;
box-shadow: 0 2px 0 #1b2a5c, 0 4px 8px rgba(0,0,0,0.28);
transition: 0.2s;
}
.pin-count-box.filtering { background: linear-gradient(160deg, #ffd83d, #ffb302); }
.pin-count-box:active { transform: scale(0.88); box-shadow: 0 1px 0 #1b2a5c, 0 2px 4px rgba(0,0,0,0.28); }
@keyframes pinCountBump { 0%{transform:scale(1);} 40%{transform:scale(1.35);} 100%{transform:scale(1);} }
.pin-count-box.bump { animation: pinCountBump 0.3s ease; }
.product-item.selected-saved {
border-color: #ff3366 !important;
background: rgba(255, 51, 102, 0.1) !important;
box-shadow: 0 0 15px rgba(255, 51, 102, 0.3) !important;
transform: scale(0.96);
}
/* ๐ฅ Info Icon & Popup Styles (For 2x First Recharge) ๐ฅ */
.info-icon {
position: absolute; top: 10px; left: 10px; z-index: 10;
font-size: 18px; color: #ffd700; cursor: pointer; text-shadow: 0 0 8px rgba(255,215,0,0.5);
}
#info-popup {
display: none; position: absolute; background: rgba(15, 23, 42, 0.95);
border: 1px solid #ffd700; color: #fff; padding: 12px; border-radius: 12px;
font-size: 11px; width: 220px; z-index: 9999; box-shadow: 0 5px 20px rgba(0,0,0,0.8);
line-height: 1.6; backdrop-filter: blur(10px);
}
#floating-menu-container {
width: 40px !important;
height: 40px !important;
}
/* 2. Profile Page (Glass UI & Set New Photo) */
.profile-wrap {
padding: 30px 20px;
background: rgba(20, 25, 30, 0.4) !important;
border: 1px solid rgba(0, 242, 255, 0.2) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 242, 255, 0.05) !important;
border-radius: 24px !important;
}
.pro-avatar {
box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
border: 2px solid var(--accent);
transition: transform 0.2s;
}
.pro-avatar:active { transform: scale(0.9); }
.set-photo-txt {
color: var(--accent); font-size: 11px; font-weight: bold; margin-top: -10px; margin-bottom: 20px; cursor: pointer; text-shadow: 0 0 8px rgba(0, 242, 255, 0.4);
}
.pro-name {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
padding: 6px 15px; border-radius: 12px;
display: inline-block; margin-bottom: 5px;
border: 1px solid rgba(255, 255, 255, 0.15);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.pro-email {
background: rgba(0, 0, 0, 0.3);
padding: 4px 12px; border-radius: 8px;
display: inline-block;
font-size: 11px; color: #ccc;
}
.pro-bal {
background: rgba(0, 242, 255, 0.05) !important;
border: 1px solid rgba(0, 242, 255, 0.2) !important;
box-shadow: inset 0 0 15px rgba(0, 242, 255, 0.1) !important;
border-radius: 16px !important;
margin: 20px 0 25px 0 !important;
}
/* 3. ML ID Check Modal UI (Ultra Clear Glass) */
#ml-check-modal {
display: none; position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.1);
z-index: 99999; justify-content: center; align-items: center;
}
.ml-check-box {
background: rgba(25, 30, 40, 0.2);
backdrop-filter: blur(35px) saturate(150%);
-webkit-backdrop-filter: blur(35px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(57, 255, 20, 0.5);
border-bottom: 1px solid rgba(57, 255, 20, 0.2);
border-radius: 28px;
padding: 25px 20px;
text-align: center;
width: 200px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 25px rgba(57, 255, 20, 0.08);
animation: glassPopUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes glassPopUp {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* ๐ฅ QUICK GAME POPUP (For Home Long Press) ๐ฅ */
#quick-game-popup {
position: fixed; bottom: 85px; left: 50%; margin-left: -135px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px);
border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 18px;
padding: 8px; display: none; flex-direction: column; gap: 6px;
z-index: 999; box-shadow: 0 15px 40px rgba(0,0,0,0.6), inset 0 0 10px rgba(255,255,255,0.05);
opacity: 0; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-origin: bottom left; transform: scale(0.9);
max-height: 50vh; overflow-y: auto; scrollbar-width: none;
}
#quick-game-popup::-webkit-scrollbar { display: none; }
#quick-game-popup.show { transform: scale(1); opacity: 1; display: flex; }
/* ๐ฅ Dynamic Custom ID Background Styling ๐ฅ */
.id-card.has-custom-bg {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 242, 255, 0.2) !important;
border-color: rgba(0, 242, 255, 0.4) !important;
transition: background 0.3s ease;
}
/* ๐ฅ Dynamic Custom ID Background Styling ๐ฅ */
.id-card.has-custom-bg {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 242, 255, 0.2) !important;
border-color: rgba(0, 242, 255, 0.4) !important;
transition: background 0.3s ease;
}
.id-card.has-custom-bg input:focus {
background: rgba(0, 242, 255, 0.2) !important;
border-color: var(--accent) !important;
box-shadow: 0 0 12px rgba(0, 242, 255, 0.3), inset 0 2px 5px rgba(0,0,0,0.3) !important;
}
.id-card.has-custom-bg .id-header span {
color: #fff !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.id-card.compact-id-card #ign-display:empty {
display: none !important;
}
/* ๐ฅ ADMIN PRICE LIST UI STYLES (UPDATED) ๐ฅ */
.price-cat-header {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 10px 15px;
border-radius: 12px;
color: #fff;
font-weight: 900;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
margin-bottom: 5px;
backdrop-filter: blur(10px);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.price-items-container {
padding-left: 10px;
border-left: 2px solid rgba(0, 242, 255, 0.3);
margin-left: 10px;
margin-bottom: 15px;
}
.pm-card {
background: rgba(10, 15, 25, 0.8);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.pm-sec-1 { border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 8px; }
.pm-name { color: #fff; font-size: 13px; font-weight: bold; margin-bottom: 5px; }
.pm-sku {
background: rgba(255, 102, 0, 0.15);
padding: 3px 8px;
border-radius: 6px;
color: #ffffff;
font-size: 11px;
font-weight: 900;
font-family: monospace;
display: inline-block;
border: 1px solid rgba(255, 102, 0, 0.4);
text-shadow: 0 0 8px #ff6600, 0 0 15px #ff6600;
}
.pm-sec-2 { display: flex; justify-content: space-between; font-size: 12px; background: rgba(255, 255, 255, 0.03); padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); }
.pm-lbl { font-size: 10px; color: #888; margin-right: 4px; text-transform: uppercase; font-weight: bold; }
.pm-sec-3 { display: flex; justify-content: space-between; align-items: center; margin-top: 2px;}
.pm-input {
width: 70px !important;
padding: 8px !important;
font-size: 14px !important;
font-weight: 900 !important;
border-radius: 8px !important;
background: rgba(0,0,0,0.6) !important;
color: #fff !important;
text-align: center;
border: 1px solid rgba(255,255,255,0.3) !important;
text-shadow: 0 0 5px rgba(255,255,255,0.5) !important;
}
.pm-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 10px var(--accent-glow) !important; }
.pm-save-btn { background: var(--accent); color: #000; border: none; border-radius: 8px; padding: 8px 15px; font-size: 12px; font-weight: 900; cursor: pointer; transition: 0.2s; box-shadow: 0 0 10px var(--accent-glow);}
.pm-save-btn:active { transform: scale(0.9); }
/* ๐ PTS COST BREAKDOWN โ Price Manager card */
.pm-pts-box { display: flex; gap: 8px; margin-top: 2px; }
.pm-pts-col {
flex: 1;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
padding: 7px 9px;
}
.pm-pts-col.pm-pts-top5 {
background: rgba(255, 213, 74, 0.06);
border-color: rgba(255, 213, 74, 0.25);
}
.pm-pts-head {
font-size: 10px; font-weight: 900; color: #00eaff;
margin-bottom: 5px; letter-spacing: 0.2px;
display: flex; align-items: center; gap: 5px;
}
.pm-pts-col.pm-pts-top5 .pm-pts-head { color: #ffd54a; }
.pm-pts-head i { font-size: 9px; opacity: 0.85; }
.pm-pts-line {
font-size: 10.5px; color: #999;
display: flex; justify-content: space-between; align-items: center;
gap: 6px; margin-top: 2px;
}
.pm-pts-line b { color: #ddd; font-weight: 900; font-size: 11px; white-space: nowrap; }
/* ๐ฅ PRICE MANAGER โ PC / Desktop wide, multi-column view */
@media (min-width: 1024px) {
#pm-outer-wrap { max-width: 1240px !important; width: 94% !important; }
#pm-outer-wrap .pm-cfg-card { max-width: 560px; margin-left: auto; margin-right: auto; }
#price-list-view .price-items-container {
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 14px !important;
align-items: stretch !important;
border-left: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
#price-list-view .pm-card {
flex: 1 1 360px !important;
max-width: calc(50% - 7px) !important;
box-sizing: border-box !important;
}
#price-list-view .pm-input { width: 140px !important; }
#price-list-view .price-cat-header { margin-top: 14px; }
}
@media (min-width: 1500px) {
#price-list-view .pm-card { max-width: calc(33.333% - 10px) !important; }
}
.transition-transform { transition: transform 0.3s ease; }
/* 1. Multi-line Text and Grid Fix for Heartopia (and general .p-name update) */
/* Apply multi-line rule to all .p-name */
.product-item .p-name {
white-space: normal !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-height: 3.6em !important;
line-height: 1.2em !important;
text-align: center !important;
margin: 5px auto !important;
padding: 4px 6px !important;
width: 95% !important;
font-size: 12px !important;
font-weight: 900 !important;
letter-spacing: 0.2px !important;
display: flex; align-items: center; justify-content: center;
}
/* ๐ฅ Heartopia Card & Text Adjustments ๐ฅ */
.product-item.heart-card-fix {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
padding: 12px 6px !important;
min-height: 140px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
}
.product-item.heart-card-fix .p-name {
width: auto !important;
max-width: 95% !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
white-space: normal !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
box-sizing: border-box !important;
text-align: center !important;
padding: 4px 8px !important;
margin: 6px auto !important;
font-size: 11px !important;
line-height: 1.4em !important;
background: rgba(135, 206, 250, 0.15) !important;
border: 1px solid rgba(135, 206, 250, 0.25) !important;
border-radius: 6px !important;
color: #87cefa !important;
font-weight: 800 !important;
}
/* 3. Price Container Adjustments */
.product-item.heart-card-fix .price-container {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
margin-top: auto !important;
}
#p-server {
background: rgba(245, 30, 137, 0.08) !important;
border: 1px solid #ff66b2 !important;
box-shadow: 0 0 8px rgba(255, 102, 178, 0.3), inset 0 0 5px rgba(255, 102, 178, 0.2) !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 900 !important;
text-shadow: 0 0 4px #ff66b2, 0 0 8px rgba(255, 102, 178, 0.5) !important;
padding: 9px 25px 9px 12px !important;
border-radius: 10px !important;
outline: none !important;
letter-spacing: 1px !important;
transition: all 0.3s ease !important;
}
#p-server:focus {
background: rgba(255, 102, 178, 0.15) !important;
box-shadow: 0 0 15px rgba(255, 102, 178, 0.6), inset 0 0 8px rgba(255, 102, 178, 0.3) !important;
}
#p-server option {
color: #ff28df !important;
text-shadow: none !important;
font-weight: bold !important;
background: #fff !important;
}
.product-list.grid-3 {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
.product-item.text-only-card {
min-height: auto !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
padding: 10px 5px !important;
text-align: center !important;
background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;
}
.text-only-card > div {
padding: 0 !important;
gap: 4px !important;
}
.text-only-card img {
width: 45px !important;
height: 45px !important;
margin-top: 0 !important;
}
.text-only-card .p-name {
font-size: 11px !important;
padding: 3px 0 !important;
margin-bottom: 2px !important;
}
.text-only-card .p-price {
font-size: 12px !important;
padding: 3px 0 !important;
margin-top: 0 !important;
}
/* ๐ฅ NEW REGION BAR UI (GLASS TRACK & RECTANGULAR PILLS) ๐ฅ */
.region-bar {
display: flex !important;
gap: 12px !important;
margin: 0 auto 20px auto !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
justify-content: flex-start !important;
padding: 12px 15px !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
touch-action: pan-x !important;
scroll-behavior: smooth !important;
transform: translateZ(0);
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 16px !important;
width: 90% !important;
max-width: 340px !important;
box-shadow: inset 0 0 10px rgba(0,0,0,0.4) !important;
}
.region-bar::-webkit-scrollbar { display: none !important; }
.region-tab {
flex-shrink: 0 !important;
white-space: nowrap !important;
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.15), inset 0 0 5px rgba(255, 255, 255, 0.1) !important;
padding: 8px 14px !important;
border-radius: 10px !important;
font-size: 12px !important;
font-weight: 900 !important;
cursor: pointer !important;
color: #fff !important;
text-shadow: 0 0 5px rgba(255,255,255,0.5) !important;
transition: all 0.3s ease !important;
}
.region-tab.active {
background: var(--accent) !important;
color: #000 !important;
border-color: var(--accent) !important;
box-shadow: 0 0 15px rgba(0, 242, 255, 0.5) !important;
transform: scale(0.95) !important;
}
/* ๐ฅ Custom Glass Scrollbar for Android ๐ฅ */
#android-scrollbar-track {
display: none;
position: fixed;
top: 25%;
bottom: 25%;
right: 3px;
width: 14px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
z-index: 999999;
touch-action: none;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
#android-scrollbar-thumb {
position: absolute;
top: 0;
left: 2px;
right: 2px;
height: 60px;
background: rgba(0, 242, 255, 0.5);
border: 1px solid #00f2ff;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 242, 255, 0.6);
transition: background 0.2s, transform 0.1s;
}
#android-scrollbar-thumb:active {
background: #00f2ff;
transform: scaleX(1.2);
}
/* ๐ด Android แแฑแธแ แแฝแฒแแฒแท scrollbar โ owner แ แแแญแฏแแฑแฌแทแแญแฏแท แแผแฏแแบ (2026-08-21) */
body.is-android-device #android-scrollbar-track {
display: none;
}
.compact-swal-actions {
display: flex !important;
flex-direction: row !important;
gap: 10px !important;
margin-top: 15px !important;
width: 100% !important;
}
.half-width-btn {
flex: 1 !important;
width: 50% !important;
margin: 0 !important;
padding: 12px 0 !important;
font-size: 13px !important;
}
@keyframes proc-letter-jump {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-10px); }
}
.proc-jump-letter {
display: inline-block;
animation: proc-letter-jump 1.4s ease-in-out infinite;
}
/* ==== style L2293 ==== */
/* ๐ฅ GIFT CARD FULL-PROFILE GRID (force v2) โ scoped to <1024px so it stops fighting with the desktop poster-card layout further down the file */
@media (max-width: 1023px) {
.gc-profile-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.gc-profile-grid .gc-big-cat .gc-cat-icon,
.gc-profile-grid .gc-profile-card .gc-cat-icon {
width: 72px !important;
height: 72px !important;
max-width: 72px !important;
max-height: 72px !important;
min-width: 72px !important;
min-height: 72px !important;
aspect-ratio: 1 / 1 !important;
margin: 0 auto 10px auto !important;
border-radius: 12px !important;
font-size: 44px !important;
background: rgba(0,0,0,0.25) !important;
overflow: hidden !important;
flex: 0 0 72px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
.gc-profile-grid .gc-cat-icon img {
width: 72px !important;
height: 72px !important;
max-width: 72px !important;
max-height: 72px !important;
object-fit: cover !important;
border-radius: 12px !important;
display: block !important;
}
#gc-cat-view .gc-profile-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
}
#gc-cat-view .gc-profile-grid .gc-big-cat {
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 8px 4px !important;
text-align: center !important;
min-height: auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#gc-cat-view .gc-profile-grid .gc-big-cat:active,
#gc-cat-view .gc-profile-grid .gc-big-cat:hover {
background: transparent !important;
box-shadow: none !important;
transform: scale(0.96) !important;
}
/* Pokemon theme card style โ hardcode + theme-99 */
body.hsa-pkmn #gc-cat-view .gc-profile-grid .gc-big-cat,
body.hsa-theme-99 #gc-cat-view .gc-profile-grid .gc-big-cat {
background: #f8f8f8 !important;
border: 3px solid #2a2a2a !important;
border-radius: 8px !important;
box-shadow: 4px 4px 0 0 #888 !important;
}
body.hsa-pkmn #gc-cat-view .gc-profile-grid .gc-cat-title,
body.hsa-theme-99 #gc-cat-view .gc-profile-grid .gc-cat-title {
color: #1a1a1a !important;
}
body.hsa-pkmn #gc-cat-view .gc-profile-grid .gc-cat-icon,
body.hsa-theme-99 #gc-cat-view .gc-profile-grid .gc-cat-icon {
background: transparent !important;
}
#gc-cat-view .gc-profile-grid .gc-cat-icon {
width: 72px !important;
height: 72px !important;
max-width: 72px !important;
max-height: 72px !important;
min-width: 72px !important;
aspect-ratio: 1 / 1 !important;
margin: 0 auto 10px auto !important;
border-radius: 12px !important;
font-size: 44px !important;
background: rgba(0,0,0,0.25) !important;
overflow: hidden !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#gc-cat-view .gc-profile-grid .gc-cat-icon img {
width: 72px !important;
height: 72px !important;
max-width: 72px !important;
max-height: 72px !important;
min-width: 0 !important;
min-height: 0 !important;
object-fit: cover !important;
border-radius: 12px !important;
display: block !important;
flex: 0 0 72px !important;
}
#gc-cat-view .gc-profile-grid .gc-big-cat img {
max-width: 72px !important;
max-height: 72px !important;
}
#gc-cat-view .gc-profile-grid .gc-cat-info { flex: none !important; width: 100% !important; }
#gc-cat-view .gc-profile-grid .gc-cat-title { font-size: 12px !important; font-weight: 800 !important; margin: 0 !important; }
#gc-cat-view .gc-profile-grid .gc-cat-sub { display: none !important; }
#gc-cat-view .gc-profile-grid > .gc-big-cat > i.fa-chevron-right,
#gc-cat-view .gc-profile-grid .gc-big-cat > i.fas.fa-chevron-right { display: none !important; }
@media (max-width: 400px) {
#gc-cat-view .gc-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
} /* end @media (max-width: 1023px) force v2 */
/* ==== style hsa-cpn-css ==== */
#ld-cpn-copy{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:6px 13px;border-radius:9px;background:rgba(10,14,26,.72);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#eaf2fb;font-size:10.5px;font-weight:800;letter-spacing:.4px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.45);}
#ld-cpn-copy:active{transform:scale(.95);background:rgba(255,255,255,.18);}
#ld-cpn-code{font-weight:900;letter-spacing:1.2px;color:#ffd54a;font-size:13px;}
/* ==== style hsa-off-css ==== */
[data-hsa-off]{display:none!important}