/* ==========================================
   OREKI.CUTE - CYBERPUNK ESPORTS DESIGN SYSTEM
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;800;900&family=Rajdhani:wght@500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root {
    --primary-color: #d600ff;
    --primary-glow: rgba(214, 0, 255, 0.6);
    --secondary-color: #ff0055;
    --secondary-glow: rgba(255, 0, 85, 0.6);
    --cyan-accent: #00f0ff;
    --cyan-glow: rgba(0, 240, 255, 0.5);
    --green-accent: #00ff7f;
    --gold-accent: #ffd700;
    
    --bg-dark: #050505;
    --bg-radial: radial-gradient(ellipse at center, rgba(48, 10, 80, 0.35) 0%, #0a0211 75%, #050505 100%);
    --card-bg: rgba(18, 10, 32, 0.75);
    --card-border: rgba(214, 0, 255, 0.25);
    --card-border-hover: rgba(0, 240, 255, 0.6);
    --input-bg: rgba(10, 5, 20, 0.85);
    
    --text-main: #ffffff;
    --text-muted: #c8c2dc;
    --font-heading: 'Orbitron', sans-serif;
    --font-tech: 'Rajdhani', 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', 'Roboto', sans-serif;
    
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg-dark);
    background-image: var(--bg-radial);
    color: var(--text-main);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ULTRA-SLEEK HIGH-TECH CUSTOM SCROLLBAR */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(7, 5, 16, 0.7);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00f2fe 0%, #7928ca 100%);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
    transition: all 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00ff9d 0%, #00f2fe 100%);
    box-shadow: 0 0 14px rgba(0, 255, 157, 0.7);
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ==========================================
   APP CONTAINER & CYBER LAYOUT
   ========================================== */
#app-content {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.97) translateY(15px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 1.2s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
}

#app-content.app-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

/* Background Cyber Grid lines */
.bg-grid-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        linear-gradient(rgba(214, 0, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(214, 0, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

.container {
    max-width: 1280px;
    width: 92%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

main.container {
    flex: 1;
}

/* Header */
.cyber-header {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    padding-top: max(env(safe-area-inset-top, 0px), 4px) !important;
    padding-bottom: 2px !important;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: none !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, margin-top 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.cyber-header.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    margin-top: -85px;
}

.header-wrapper {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.brand-container {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.brand-logo {
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    text-decoration: none !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.history-circle-btn,
#open-history-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    cursor: pointer !important;
    position: absolute !important;
    right: 14px !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    z-index: 99 !important;
    color: #00f0ff !important;
    font-size: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.25s ease !important;
    padding: 0 !important;
    outline: none !important;
}

.history-circle-btn:hover,
#open-history-btn:hover {
    background: rgba(0, 240, 255, 0.2) !important;
    border-color: rgba(0, 240, 255, 0.5) !important;
    color: #ffffff !important;
    transform: scale(1.06) !important;
}

/* Floating AssistiveTouch Audio Control Widget */
.assistive-audio-widget {
    position: fixed !important;
    z-index: 999999 !important;
    touch-action: none !important;
    top: calc(env(safe-area-inset-top, 0px) + 70px);
    right: 14px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease !important;
}

.assistive-audio-btn {
    width: clamp(38px, 5vh, 42px) !important;
    height: clamp(38px, 5vh, 42px) !important;
    border-radius: 50% !important;
    background: rgba(12, 6, 26, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(0, 242, 254, 0.6) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 242, 254, 0.3) !important;
    color: #00f0ff !important;
    font-size: clamp(14px, 2.2vh, 17px) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    padding: 0 !important;
}

.assistive-audio-widget.expanded .assistive-audio-btn {
    display: none !important;
}

.assistive-audio-menu {
    display: none !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 5px !important;
    background: rgba(12, 6, 26, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 20px !important;
    border: 1.5px solid rgba(0, 242, 254, 0.6) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 242, 254, 0.35) !important;
    transform: scale(0.85) !important;
    opacity: 0 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.assistive-audio-widget.expanded .assistive-audio-menu {
    display: flex !important;
    transform: scale(1) !important;
    opacity: 1 !important;
}

.assistive-menu-item {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-family: var(--font-tech) !important;
    font-size: clamp(10px, 2.5vw, 11px) !important;
    font-weight: 800 !important;
    padding: 5px 12px !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.assistive-menu-item.active {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(214, 0, 255, 0.4)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 240, 255, 0.5) !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3) !important;
}

/* Khung bao bọc Avatar Ripple Neon */
.avatar-wrapper {
    position: relative;
    width: clamp(34px, 4.5vh, 40px) !important;
    height: clamp(34px, 4.5vh, 40px) !important;
    min-width: clamp(34px, 4.5vh, 40px) !important;
    min-height: clamp(34px, 4.5vh, 40px) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 5;
    flex-shrink: 0;
    margin: 0 auto !important;
}

/* Lớp sóng ánh sáng lan tỏa 1 & 2 (Ripple Effect) */
.avatar-wrapper::before,
.avatar-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    box-sizing: border-box;
    opacity: 0;
    z-index: 1;
    animation: ripple-effect 2s infinite cubic-bezier(0.1, 0.2, 0.4, 1);
    pointer-events: none;
}

/* Làm trễ vòng sóng thứ hai để tạo nhịp liên tục */
.avatar-wrapper::after {
    animation-delay: 1s;
}

/* Hình ảnh Avatar chính */
.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #ffffff !important;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--secondary-color) !important;
    transition: all 0.4s ease;
}

/* Keyframes hiệu ứng sóng bung tỏa */
@keyframes ripple-effect {
    0% {
        transform: scale(1);
        opacity: 0.85;
        border-width: 2px;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
        border-width: 0px;
    }
}

/* Trạng thái thu nhỏ khi cuộn trang hoặc kích hoạt class .shrunk */
.avatar-wrapper.shrunk {
    width: 44px;
    height: 44px;
}

.avatar-wrapper.shrunk .avatar-img {
    border-width: 2px;
    box-shadow: 0 0 15px var(--primary-color);
}

.brand-title-neon {
    font-family: 'Corben', cursive, serif;
    font-size: clamp(15px, 4vw, 18px) !important;
    font-weight: 800 !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    margin: 2px 0 !important;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #00f0ff 20%,
        #ff00d6 40%,
        #ffd700 60%,
        #00f0ff 80%,
        #ffffff 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px rgba(214, 0, 255, 0.85)) drop-shadow(0 0 24px rgba(0, 240, 255, 0.7));
    animation: brand-gradient-flow 3.5s linear infinite, neon-brand-glow 3s infinite ease-in-out alternate;
    line-height: 1.1;
}

@keyframes brand-gradient-flow {
    0% {
        background-position: 200% center;
    }
    100% {
        background-position: 0% center;
    }
}

@keyframes neon-brand-glow {
    0% { filter: drop-shadow(0 0 10px rgba(214, 0, 255, 0.8)) drop-shadow(0 0 18px rgba(0, 240, 255, 0.6)); }
    50% { filter: drop-shadow(0 0 20px rgba(255, 0, 214, 1)) drop-shadow(0 0 32px rgba(0, 240, 255, 0.9)); }
    100% { filter: drop-shadow(0 0 12px rgba(214, 0, 255, 0.85)) drop-shadow(0 0 22px rgba(0, 240, 255, 0.7)); }
}

/* Scroll Reveal Hidden Until Scroll */
.scroll-reveal {
    opacity: 0;
    transform: translateY(35px) scale(0.98);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Mobile Screen Priority Action Icons Optimization */
@media (max-width: 768px) {
    .cyber-header {
        padding: 4px 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
    .header-wrapper {
        gap: 4px;
    }
    .brand-title-neon {
        font-size: clamp(15px, 4vw, 18px) !important;
        margin: 2px 0 !important;
    }
    .brand-subtitle {
        font-size: 9px !important;
        margin-top: 1px !important;
    }
    .avatar-wrapper {
        width: clamp(34px, 4.5vh, 40px) !important;
        height: clamp(34px, 4.5vh, 40px) !important;
    }
    .header-actions {
        display: flex;
        gap: 6px;
    }
    .header-actions .cyber-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* 1. Lớp lưới Perspective 3D chuyển động */
#tech-bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: 
        linear-gradient(rgba(214, 0, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(214, 0, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    transform: perspective(500px) rotateX(60deg) scale(2) translateY(-100px);
    animation: grid-move 2.5s linear infinite;
    opacity: 0.4;
    pointer-events: none;
}

@keyframes grid-move {
    0% { background-position: 0 0; }
    100% { background-position: 0 40px; }
}

/* 2. Lớp mưa chữ Matrix */
#matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: transparent;
    opacity: 0.85;
    pointer-events: none;
}

/* 3. Lớp mạng lưới hạt Particle tương tác chuột */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.brand-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.brand-subtitle {
    font-family: var(--font-heading);
    font-size: 9px !important;
    font-weight: 700;
    color: #ff0055;
    letter-spacing: 0.6px !important;
    text-transform: uppercase;
    display: inline-block;
    margin: 1px auto 0 auto !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-shadow: 0 0 8px rgba(255, 0, 85, 0.85), 0 0 14px rgba(255, 0, 85, 0.4);
    animation: typing-loop 4s steps(28, end) infinite;
}

@keyframes typing-loop {
    0% { width: 0; }
    45%, 85% { width: 100%; }
    100% { width: 0; }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cyber-btn {
    background: linear-gradient(135deg, rgba(214, 0, 255, 0.15), rgba(255, 0, 85, 0.15));
    border: 1px solid var(--card-border);
    color: var(--text-main);
    padding: 10px 18px;
    font-family: var(--font-tech);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.cyber-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
}

.cyber-btn:hover::before {
    left: 100%;
}

.cyber-btn:hover {
    border-color: var(--cyan-accent);
    box-shadow: 0 0 15px var(--cyan-glow);
    color: #fff;
    transform: translateY(-2px);
}

.cyber-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 15px var(--primary-glow);
}

.cyber-btn-primary:hover {
    box-shadow: 0 0 25px var(--secondary-glow), 0 0 10px var(--cyan-accent);
}

.cyber-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* ==========================================
   ANDROID MATERIAL YOU / CYBERPUNK BOTTOM NAV
   ========================================== */
.android-bottom-nav,
.bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    min-height: 64px !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding-top: 6px !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px) !important;
    background: linear-gradient(180deg, rgba(12, 6, 24, 0.96), rgba(8, 3, 18, 0.90)) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: none !important;
    z-index: 99999 !important;
    box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.85), 0 -4px 18px rgba(214, 0, 255, 0.08) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.45s ease !important;
}

.android-bottom-nav::before,
.bottom-nav::before {
    display: none !important;
    content: none !important;
}

body.app-locked {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
}

body.app-locked #tech-bg-layer {
    display: none !important;
    opacity: 0 !important;
}

/* Hide bottom navbar while app license gatekeeper is active */
body.app-locked .android-bottom-nav,
body.app-locked .bottom-nav,
#app-license-gatekeeper:not([style*="display: none"]):not(.gatekeeper-fade-out) ~ .android-bottom-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(100%) !important;
}

.bottom-nav-container {
    max-width: 500px;
    width: 100% !important;
    height: 100% !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 0 4px !important;
}

.nav-tab-item,
.nav-item {
    background: transparent;
    border: none;
    outline: none;
    flex: 1 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 2px 0 !important;
    cursor: pointer;
    color: #94a3b8;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px;
    position: relative;
}

.nav-tab-icon,
.nav-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    transition: all 0.3s ease;
    transform: none !important;
}

.nav-tab-icon i,
.nav-tab-icon svg,
.nav-icon i,
.nav-icon svg {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

.nav-tab-label,
.nav-label {
    font-family: var(--font-tech);
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94a3b8;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    transition: all 0.3s ease;
}

.nav-tab-item.active,
.nav-item.active {
    color: #00e5ff;
}

.nav-tab-item.active .nav-tab-icon,
.nav-item.active .nav-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(214, 0, 255, 0.5), rgba(0, 240, 255, 0.4));
    border: 1.5px solid var(--cyan-accent);
    color: #00e5ff !important;
    box-shadow: 0 0 14px var(--cyan-glow);
    transform: none !important;
}

.nav-tab-item.active .nav-tab-label,
.nav-item.active .nav-label {
    color: #00e5ff !important;
    text-shadow: 0 0 8px var(--cyan-glow);
}

/* Page Containers with Smooth Slide-Down Entrance Animation */
.app-page {
    display: none;
}

.app-page.active-page {
    display: block;
    animation: pageSlideDown 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pageSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-22px) scale(0.985);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Smooth Slide-Down Animation for Warranty Box Dropdown */
#pkg-detail-warranty-box {
    display: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#pkg-detail-warranty-box.active-box,
#pkg-detail-warranty-box[style*="display: block"] {
    display: block !important;
    animation: warrantySlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes warrantySlideDown {
    0% {
        opacity: 0;
        transform: translateY(-16px);
        max-height: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        max-height: 800px;
    }
}

@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* Banner Hero */
.hero-banner {
    margin: 20px 0;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.hero-info h1 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 15px var(--primary-glow);
}

.hero-info p {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    max-width: 650px;
    line-height: 1.5;
    text-shadow: 0 1px 4px rgba(0,0,0,0.95);
}

.hero-tags {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.cyber-tag {
    background: rgba(0, 240, 255, 0.22);
    border: 1.5px solid rgba(0, 240, 255, 0.7);
    color: var(--cyan-accent);
    padding: 4px 10px;
    font-family: var(--font-tech);
    font-size: 12px;
    font-weight: 800;
    border-radius: 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

/* Main Grid Layout */
.app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
}

main.container {
    padding-bottom: 95px !important;
}

@media (max-width: 992px) {
    .app-grid {
        grid-template-columns: 1fr;
    }
}

/* Cyber Card & Hero Banner */
.cyber-card, .hero-banner {
    position: relative;
    background: linear-gradient(135deg, rgba(14, 5, 30, 0.65), rgba(8, 2, 18, 0.68));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(0, 240, 255, 0.35);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    transition: var(--transition-smooth);
    overflow: hidden;
    z-index: 1;
}

.hero-banner {
    margin: 20px 0;
    border-left: 5px solid var(--primary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Static clean card frame (LED tracer beam disabled) */
.cyber-card::before, .hero-banner::before,
.cyber-card::after, .hero-banner::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

#dpi-vip-gatekeeper {
    max-width: 560px !important;
    margin: 35px auto !important;
    text-align: center !important;
    padding: 38px 28px 30px 28px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background: rgba(6, 2, 18, 0.15) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.75) !important;
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.3), inset 0 0 25px rgba(255, 215, 0, 0.1) !important;
    animation: dpiVipFrameGlow 4s ease-in-out infinite alternate !important;
}

#dpi-vip-gatekeeper::before,
#dpi-vip-gatekeeper::after {
    display: none !important;
    content: none !important;
}

@keyframes dpiVipFrameGlow {
    0% {
        border-color: rgba(255, 215, 0, 0.75);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.25), inset 0 0 20px rgba(255, 215, 0, 0.08), 0 20px 60px rgba(0, 0, 0, 0.75);
    }
    50% {
        border-color: rgba(0, 242, 254, 0.85);
        box-shadow: 0 0 40px rgba(0, 242, 254, 0.35), inset 0 0 25px rgba(0, 242, 254, 0.12), 0 25px 70px rgba(0, 0, 0, 0.85);
    }
    100% {
        border-color: rgba(255, 215, 0, 0.95);
        box-shadow: 0 0 45px rgba(255, 215, 0, 0.4), inset 0 0 30px rgba(255, 215, 0, 0.15), 0 20px 60px rgba(0, 0, 0, 0.75);
    }
}

/* Corner HUD accents */
.dpi-hud-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    z-index: 5;
}

.dpi-hud-tl {
    top: -1px;
    left: -1px;
    border-top: 3px solid #ffd700;
    border-left: 3px solid #ffd700;
    border-top-left-radius: 24px;
    filter: drop-shadow(0 0 8px #ffd700);
}

.dpi-hud-tr {
    top: -1px;
    right: -1px;
    border-top: 3px solid #ffd700;
    border-right: 3px solid #ffd700;
    border-top-right-radius: 24px;
    filter: drop-shadow(0 0 8px #ffd700);
}

.dpi-hud-bl {
    bottom: -1px;
    left: -1px;
    border-bottom: 3px solid #00f2fe;
    border-left: 3px solid #00f2fe;
    border-bottom-left-radius: 24px;
    filter: drop-shadow(0 0 8px #00f2fe);
}

.dpi-hud-br {
    bottom: -1px;
    right: -1px;
    border-bottom: 3px solid #00f2fe;
    border-right: 3px solid #00f2fe;
    border-bottom-right-radius: 24px;
    filter: drop-shadow(0 0 8px #00f2fe);
}

/* VIP Emblem Shield for lock icon */
.dpi-vip-shield-emblem {
    width: 76px;
    height: 76px;
    margin: 0 auto 16px auto;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.25) 0%, rgba(10, 4, 28, 0.75) 100%);
    border: 2px solid rgba(255, 215, 0, 0.65);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.45), inset 0 0 18px rgba(255, 215, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #ffd700;
    animation: goldLockPulse 2.2s ease-in-out infinite;
}

/* Badge pill */
.dpi-vip-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.45);
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.25);
    margin-bottom: 14px;
    font-family: var(--font-tech);
}

/* Customized Input and Button for DPI VIP Gatekeeper */
#dpi-vip-gatekeeper .cyber-input {
    background: rgba(8, 3, 22, 0.75) !important;
    border: 1.5px solid rgba(255, 215, 0, 0.45) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5) !important;
}

#dpi-vip-gatekeeper .cyber-input:focus {
    border-color: #ffd700 !important;
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.55), inset 0 0 12px rgba(255, 215, 0, 0.2) !important;
    transform: translateY(-1px) !important;
}

#dpi-vip-gatekeeper #btn-verify-dpi-key {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%) !important;
    color: #080216 !important;
    font-weight: 800 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.45) !important;
    transition: all 0.3s ease !important;
}

#dpi-vip-gatekeeper #btn-verify-dpi-key:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.75) !important;
    background: linear-gradient(135deg, #ffe033 0%, #ffb700 100%) !important;
}

@keyframes goldLockPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 16px #ffd700) drop-shadow(0 0 30px #ffa500);
  }
  50% {
    transform: scale(1.15);
    filter: drop-shadow(0 0 35px #ffffff) drop-shadow(0 0 55px #ffd700) drop-shadow(0 0 80px #ffa500);
  }
}

/* 100% Ultra-Fluid 1-Billion Color ARGB Spectrum Liquid Border Glow */
@keyframes border-color-sync {
    0% {
        border-color: #00f0ff;
        box-shadow: 0 0 26px rgba(0, 240, 255, 0.75), inset 0 0 15px rgba(0, 240, 255, 0.35), 0 12px 48px rgba(0, 0, 0, 0.85);
    }
    8% {
        border-color: #0088ff;
        box-shadow: 0 0 26px rgba(0, 136, 255, 0.75), inset 0 0 15px rgba(0, 136, 255, 0.35), 0 12px 48px rgba(0, 0, 0, 0.85);
    }
    16% {
        border-color: #7000ff;
        box-shadow: 0 0 26px rgba(112, 0, 255, 0.75), inset 0 0 15px rgba(112, 0, 255, 0.35), 0 12px 48px rgba(0, 0, 0, 0.85);
    }
    25% {
        border-color: #b000ff;
        box-shadow: 0 0 26px rgba(176, 0, 255, 0.75), inset 0 0 15px rgba(176, 0, 255, 0.35), 0 12px 48px rgba(0, 0, 0, 0.85);
    }
    33% {
        border-color: #ff00d6;
        box-shadow: 0 0 26px rgba(255, 0, 214, 0.75), inset 0 0 15px rgba(255, 0, 214, 0.35), 0 12px 48px rgba(0, 0, 0, 0.85);
    }
    41% {
        border-color: #ff0055;
        box-shadow: 0 0 26px rgba(255, 0, 85, 0.75), inset 0 0 15px rgba(255, 0, 85, 0.35), 0 12px 48px rgba(0, 0, 0, 0.85);
    }
    50% {
        border-color: #ff3300;
        box-shadow: 0 0 26px rgba(255, 51, 0, 0.75), inset 0 0 15px rgba(255, 51, 0, 0.35), 0 12px 48px rgba(0, 0, 0, 0.85);
    }
    58% {
        border-color: #ffaa00;
        box-shadow: 0 0 26px rgba(255, 170, 0, 0.75), inset 0 0 15px rgba(255, 170, 0, 0.35), 0 12px 48px rgba(0, 0, 0, 0.85);
    }
    66% {
        border-color: #ffd700;
        box-shadow: 0 0 26px rgba(255, 215, 0, 0.75), inset 0 0 15px rgba(255, 215, 0, 0.35), 0 12px 48px rgba(0, 0, 0, 0.85);
    }
    75% {
        border-color: #00ff88;
        box-shadow: 0 0 26px rgba(0, 255, 136, 0.75), inset 0 0 15px rgba(0, 255, 136, 0.35), 0 12px 48px rgba(0, 0, 0, 0.85);
    }
    83% {
        border-color: #00ffcc;
        box-shadow: 0 0 26px rgba(0, 255, 204, 0.75), inset 0 0 15px rgba(0, 255, 204, 0.35), 0 12px 48px rgba(0, 0, 0, 0.85);
    }
    91% {
        border-color: #00d4ff;
        box-shadow: 0 0 26px rgba(0, 212, 255, 0.75), inset 0 0 15px rgba(0, 212, 255, 0.35), 0 12px 48px rgba(0, 0, 0, 0.85);
    }
    100% {
        border-color: #00f0ff;
        box-shadow: 0 0 26px rgba(0, 240, 255, 0.75), inset 0 0 15px rgba(0, 240, 255, 0.35), 0 12px 48px rgba(0, 0, 0, 0.85);
    }
}

@keyframes edge-pulse-tracer {
    /* 1. TOP EDGE (Left -> Right) */
    0% {
        top: -1px;
        left: -90px;
        width: 90px;
        height: 4px;
        background: linear-gradient(90deg, transparent, #00f0ff, #ffffff, #ff00d6);
    }
    24.9% {
        top: -1px;
        left: 100%;
        width: 90px;
        height: 4px;
        background: linear-gradient(90deg, transparent, #00f0ff, #ffffff, #ff00d6);
    }
    /* 2. RIGHT EDGE (Top -> Bottom) */
    25% {
        top: -90px;
        left: auto;
        right: -1px;
        width: 4px;
        height: 90px;
        background: linear-gradient(180deg, transparent, #ff00d6, #ffffff, #d600ff);
    }
    49.9% {
        top: 100%;
        left: auto;
        right: -1px;
        width: 4px;
        height: 90px;
        background: linear-gradient(180deg, transparent, #ff00d6, #ffffff, #d600ff);
    }
    /* 3. BOTTOM EDGE (Right -> Left) */
    50% {
        top: auto;
        bottom: -1px;
        right: -90px;
        left: auto;
        width: 90px;
        height: 4px;
        background: linear-gradient(270deg, transparent, #d600ff, #ffffff, #00ff88);
    }
    74.9% {
        top: auto;
        bottom: -1px;
        right: 100%;
        left: auto;
        width: 90px;
        height: 4px;
        background: linear-gradient(270deg, transparent, #d600ff, #ffffff, #00ff88);
    }
    /* 4. LEFT EDGE (Bottom -> Top) */
    75% {
        bottom: -90px;
        top: auto;
        right: auto;
        left: -1px;
        width: 4px;
        height: 90px;
        background: linear-gradient(0deg, transparent, #00ff88, #ffffff, #00f0ff);
    }
    99.9% {
        bottom: 100%;
        top: auto;
        right: auto;
        left: -1px;
        width: 4px;
        height: 90px;
        background: linear-gradient(0deg, transparent, #00ff88, #ffffff, #00f0ff);
    }
    100% {
        top: -1px;
        left: -90px;
        width: 90px;
        height: 4px;
        background: linear-gradient(90deg, transparent, #00f0ff, #ffffff, #ff00d6);
    }
}

.cyber-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 30px; height: 30px;
    border-top: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    border-top-right-radius: 10px;
    pointer-events: none;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(214, 0, 255, 0.15);
}

.card-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 1px;
}

.card-title i {
    color: var(--primary-color);
    text-shadow: 0 0 8px var(--primary-glow);
}

/* Form Styles */
.form-group {
    margin-bottom: 22px;
}

.form-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-tech);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.label-badges {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-label span.value-badge {
    background: rgba(214, 0, 255, 0.2);
    border: 1px solid var(--primary-color);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-tech);
    font-weight: 700;
    font-size: 14px;
}

.status-badge {
    font-family: var(--font-tech);
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-smooth);
}

.status-badge.status-valid {
    background: rgba(0, 255, 127, 0.15);
    border: 1px solid var(--green-accent);
    color: var(--green-accent);
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.3);
}

.status-badge.status-invalid {
    background: rgba(255, 0, 85, 0.2);
    border: 1px solid var(--secondary-color);
    color: #ff0055;
    box-shadow: 0 0 12px rgba(255, 0, 85, 0.5);
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.cyber-input {
    width: 100%;
    background: rgba(6, 2, 14, 0.98);
    border: 1.5px solid rgba(0, 240, 255, 0.45);
    border-radius: 6px;
    padding: 12px 16px;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 700;
    outline: none;
    transition: var(--transition-smooth);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

.cyber-input:focus {
    border-color: var(--cyan-accent);
    box-shadow: 0 0 14px var(--cyan-glow);
}

.cyber-input::placeholder {
    font-style: italic;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.3px;
    transition: opacity 0.25s ease;
}

.cyber-input:focus::placeholder {
    opacity: 0.3;
}

.cyber-input.input-invalid {
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 14px var(--secondary-glow) !important;
    background: rgba(40, 5, 20, 0.98) !important;
}

/* Presets chip selector */
.presets-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.chip-btn {
    background: rgba(28, 12, 48, 0.92);
    border: 1px solid rgba(214, 0, 255, 0.38);
    color: #ffffff;
    padding: 6px 12px;
    font-family: var(--font-tech);
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.chip-btn:hover, .chip-btn.active {
    background: rgba(214, 0, 255, 0.35);
    border-color: var(--cyan-accent);
    color: #fff;
    box-shadow: 0 0 12px var(--cyan-glow);
}

/* VERTICAL TOP-TO-BOTTOM SENSITIVITY FORM LIST */
.sens-vertical-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.sens-row-card {
    background: rgba(16, 7, 34, 0.76);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(214, 0, 255, 0.45);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
}

.sens-row-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 16px rgba(214, 0, 255, 0.6);
}

.sens-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sens-row-title {
    font-family: var(--font-tech);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sens-row-title i {
    color: var(--cyan-accent);
    width: 20px;
    text-align: center;
}

.sens-row-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

.input-number-box {
    width: 90px;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    color: var(--gold-accent);
    padding: 8px 10px;
}

/* Custom Range Slider */
.cyber-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.cyber-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    outline: none;
}

.cyber-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color), 0 0 15px var(--secondary-color);
    cursor: pointer;
    border: 2px solid #fff;
    transition: transform 0.1s ease;
}

.cyber-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Playstyle Options */
.playstyle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 6px;
}

@media (max-width: 576px) {
    .playstyle-grid {
        grid-template-columns: 1fr;
    }
}

.playstyle-card {
    background: rgba(16, 7, 34, 0.76);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(214, 0, 255, 0.45);
    padding: 12px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.playstyle-card:hover, .playstyle-card.selected {
    border-color: var(--cyan-accent);
    background: rgba(0, 240, 255, 0.2);
    box-shadow: 0 0 14px var(--cyan-glow);
}

.playstyle-card i {
    font-size: 18px;
    color: var(--primary-color);
}

.playstyle-card.selected i {
    color: var(--cyan-accent);
}

.playstyle-info h4 {
    font-family: var(--font-tech);
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.playstyle-info p {
    font-size: 11px;
    color: var(--text-muted);
}

/* Output Display HUD */
.output-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.output-placeholder i {
    font-size: 50px;
    color: var(--primary-color);
    margin-bottom: 16px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.results-content {
    display: none;
}

.results-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Result Item Row */
.res-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(16, 7, 34, 0.76);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(214, 0, 255, 0.45);
    border-radius: 8px;
    margin-bottom: 10px;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.res-row:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 16px var(--primary-glow);
}

.res-name {
    font-family: var(--font-tech);
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.res-name i {
    color: var(--cyan-accent);
}

.res-value-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.res-val {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    color: var(--gold-accent);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.res-delta {
    font-family: var(--font-tech);
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
}

.res-delta.up {
    background: rgba(0, 255, 127, 0.15);
    color: var(--green-accent);
    border: 1px solid var(--green-accent);
}
.res-delta.down {
    background: rgba(255, 0, 85, 0.15);
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

/* Fire Button Visualizer HUD */
.hud-visualizer-container {
    background: rgba(8, 4, 18, 0.9);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}

.phone-screen-mockup {
    width: 100%;
    height: 180px;
    background: linear-gradient(180deg, #100820, #05020a);
    border: 2px solid rgba(0, 240, 255, 0.4);
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.screen-header-hud {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 10px;
    color: var(--cyan-accent);
    font-family: var(--font-tech);
}

.virtual-joystick {
    position: absolute;
    bottom: 25px;
    left: 40px;
    width: 50px;
    height: 50px;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.virtual-joystick::after {
    content: '';
    width: 20px; height: 20px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
}

.virtual-fire-btn {
    position: absolute;
    bottom: 25px;
    right: 50px;
    border: 3px solid var(--secondary-color);
    background: radial-gradient(circle, rgba(255,0,85,0.6) 0%, rgba(214,0,255,0.2) 100%);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--secondary-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.virtual-fire-btn i {
    color: #fff;
    font-size: 16px;
    text-shadow: 0 0 6px #fff;
}

.drag-arrow {
    position: absolute;
    bottom: 75px;
    right: 65px;
    width: 4px;
    height: 45px;
    background: linear-gradient(180deg, var(--green-accent), transparent);
    animation: dragAnim 1.5s infinite;
}

@keyframes dragAnim {
    0% { height: 0px; opacity: 0; }
    50% { height: 45px; opacity: 1; }
    100% { height: 45px; opacity: 0; }
}

/* Headshot Mini Game / Practice Modal */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-cyber {
    background: var(--bg-dark);
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 30px var(--primary-glow);
    width: 90%;
    max-width: 650px;
    border-radius: 16px;
    padding: 24px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 16px; right: 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
}
.modal-close:hover { color: var(--secondary-color); }

/* Simulator Area */
.sim-canvas-wrap {
    width: 100%;
    height: 260px;
    background: radial-gradient(circle at center, #1b0a30 0%, #05020a 100%);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin: 16px 0;
    user-select: none;
    cursor: crosshair;
}

.target-enemy {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.enemy-head {
    width: 45px;
    height: 45px;
    background: radial-gradient(circle, #ff0055 30%, #880022 100%);
    border: 2px solid #fff;
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: 0 0 15px var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.enemy-body {
    width: 65px;
    height: 70px;
    background: rgba(100, 100, 150, 0.4);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    margin-top: 4px;
}

.drag-button-sim {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 55px;
    background: radial-gradient(circle, var(--primary-color) 0%, rgba(100,0,150,0.8) 100%);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 0 15px var(--primary-glow);
}
.drag-button-sim:active { cursor: grabbing; }

.hit-feedback {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 900;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.hit-feedback.headshot {
    color: #ff0000;
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff5500;
}
.hit-feedback.bodyshot {
    color: #ffff00;
    text-shadow: 0 0 10px #ffff00;
}

/* Toast notification */
.cyber-toast {
    position: fixed;
    bottom: 90px;
    right: 30px;
    background: rgba(18, 10, 32, 0.95);
    border: 1px solid var(--cyan-accent);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-family: var(--font-tech);
    font-size: 15px;
    box-shadow: 0 0 20px var(--cyan-glow);
    z-index: 10000;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cyber-toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* Keyframe Animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes loadingBar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes pulseGlow {
    0%, 100% { filter: drop-shadow(0 0 15px var(--gold-glow)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 25px var(--gold-glow)); transform: scale(1.05); }
}

/* Footer & Subtle Bottom Watermark */
.cyber-footer {
    margin-top: auto;
    padding: 20px 15px 95px 15px; /* Sits at absolute bottom of page, cleanly above mobile navigation bar */
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.copyright-watermark {
    font-family: var(--font-tech);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.35); /* Pure subtle faded text only */
    letter-spacing: 0.5px;
    line-height: 1.5;
    margin: 0 auto;
    user-select: none;
}

/* ==================================================
   MODERN ESPORTS HUD & DARK GLASSMORPHISM SYSTEM
   ================================================== */

/* 1. VIP Status HUD Bar */
.vip-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(13, 16, 28, 0.75);
  border: 1px solid rgba(0, 255, 157, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  padding: 10px 18px;
  margin: 12px 0 18px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(0, 255, 157, 0.05);
  flex-wrap: wrap;
  gap: 10px;
}

.vip-badge-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vip-dot {
  width: 8px;
  height: 8px;
  background: #00ff9d;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff9d;
  animation: pulse-dot 1.8s infinite;
}

.vip-tag {
  background: rgba(0, 255, 157, 0.15);
  color: #00ff9d;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  border: 1px solid rgba(0, 255, 157, 0.3);
}

.vip-expiry {
  color: #8fa0b5;
  font-size: 12px;
  font-weight: 500;
}

.vip-expiry span {
  color: #e2e8f0;
  font-weight: 600;
}

.vip-countdown {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  background: rgba(0, 242, 254, 0.1);
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 242, 254, 0.25);
  color: #00f2fe;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* 2. HUD Input & Output Panels */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

.hud-panel {
  background: rgba(15, 18, 32, 0.65);
  border: 1px solid rgba(0, 242, 254, 0.18);
  border-radius: 18px;
  padding: 20px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: border-color 0.3s ease;
}

.hud-panel:hover {
  border-color: rgba(0, 242, 254, 0.4);
}

/* Device Chips */
.device-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  transition: all 0.2s ease;
}

.device-chip:hover {
  background: rgba(0, 242, 254, 0.12);
  border-color: #00f2fe;
  color: #ffffff;
  transform: translateY(-1px);
}

.device-chip.active {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.25), rgba(255, 0, 127, 0.25));
  border-color: #00f2fe;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.3);
}

/* Style Selector Cards */
.style-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.style-card:hover {
  background: rgba(0, 242, 254, 0.06);
  border-color: rgba(0, 242, 254, 0.4);
  transform: translateX(3px);
}

.style-card.active, .style-card.selected {
  background: linear-gradient(90deg, rgba(0, 242, 254, 0.12), rgba(121, 40, 202, 0.12));
  border-color: #00f2fe;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.2);
}

/* Export Main Button */
.btn-export-main {
  position: relative;
  width: 100%;
  padding: 15px 20px;
  margin-top: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #00f2fe 0%, #7928ca 50%, #ff007f 100%);
  background-size: 200% 200%;
  color: #ffffff;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 25px rgba(0, 242, 254, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}

.btn-export-main::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
  transform: rotate(30deg) translateY(-100%);
  transition: transform 0.6s ease;
}

.btn-export-main:hover {
  box-shadow: 0 8px 32px rgba(0, 242, 254, 0.6), 0 0 20px rgba(255, 0, 127, 0.4);
  transform: translateY(-2px);
  background-position: 100% 0;
}

.btn-export-main:hover::after {
  transform: rotate(30deg) translateY(100%);
}

.btn-export-main:active {
  transform: translateY(1px) scale(0.98);
}

/* ==================================================
   SECTION 3: ACCESSIBILITY DPI CHINA PROCESSOR STYLING
   ================================================== */
#page-dpi.active-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 100px);
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 12px 0 28px 0;
  box-sizing: border-box;
}

#page-dpi .sensi-hero-header {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#page-dpi #dpi-vip-gatekeeper {
  width: 100%;
  max-width: 560px !important;
  margin: 16px auto !important;
}

#page-dpi #dpi-vip-content {
  width: 100%;
}

#page-dpi .hero-tags .cyber-tag {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

#page-dpi .hero-tags .cyber-tag:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 20px rgba(0, 242, 254, 0.3);
}

#page-dpi .hud-panel {
  background: rgba(12, 16, 28, 0.72);
  border: 1px solid rgba(0, 242, 254, 0.16);
  border-radius: 20px;
  padding: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-dpi .hud-panel:hover {
  border-color: rgba(0, 242, 254, 0.38);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(0, 242, 254, 0.2);
}

#page-dpi .device-autocomplete-input {
  background: rgba(8, 11, 20, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 13px 16px;
  color: #fff;
  font-size: 14px;
  transition: all 0.25s ease;
}

#page-dpi .device-autocomplete-input:focus {
  border-color: #00f2fe;
  background: rgba(10, 14, 26, 0.95);
  box-shadow: 0 0 18px rgba(0, 242, 254, 0.25), inset 0 1px 3px rgba(0,0,0,0.5);
  outline: none;
}

#page-dpi .device-chip {
  padding: 6px 13px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-dpi .device-chip:hover {
  background: rgba(0, 242, 254, 0.14);
  border-color: #00f2fe;
  color: #ffffff;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 242, 254, 0.2);
}

#page-dpi .device-chip.active {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.3), rgba(255, 0, 127, 0.3));
  border-color: #00f2fe;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.35);
}

#page-dpi .style-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

#page-dpi .style-card:hover {
  background: rgba(0, 242, 254, 0.06);
  border-color: rgba(0, 242, 254, 0.35);
  transform: translateX(5px);
}

#page-dpi .style-card.selected,
#page-dpi .style-card.active {
  background: linear-gradient(90deg, rgba(0, 242, 254, 0.14), rgba(121, 40, 202, 0.12));
  border-color: #00f2fe;
  border-left: 4px solid #00f2fe;
  box-shadow: 0 6px 20px rgba(0, 242, 254, 0.18), inset 0 0 15px rgba(0, 242, 254, 0.06);
}

#page-dpi .output-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

#page-dpi .output-placeholder i {
  font-size: 46px;
  margin-bottom: 16px;
  animation: radarPulse 2.5s infinite ease-in-out;
}

@keyframes radarPulse {
  0% { transform: scale(0.92); opacity: 0.6; filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.4)); }
  50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 18px rgba(0, 242, 254, 0.8)); }
  100% { transform: scale(0.92); opacity: 0.6; filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.4)); }
}

/* ==================================================
   LUXURY MINIMALIST ESPORTS UI (PAGE 1 & PAGE 2 V6.0)
   Clean, Professional, Elegant & Ultra-Sleek
   ================================================== */

/* PAGE 1 CONTAINER */
.page-standard-container {
  max-width: 740px;
  margin: 15px auto 40px auto;
  padding: 0 12px;
}

.std-hero-header {
  text-align: center;
  margin-bottom: 26px;
}

.std-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 242, 254, 0.08);
  border: 1px solid rgba(0, 242, 254, 0.22);
  border-radius: 20px;
  padding: 5px 16px;
  color: #00f2fe;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.std-pulse-dot {
  width: 7px;
  height: 7px;
  background: #00f2fe;
  border-radius: 50%;
  box-shadow: 0 0 8px #00f2fe;
  animation: pulse-dot 1.6s infinite;
}

.std-hero-title {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.std-hero-desc {
  color: #94a3b8;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* MAIN CARD - LUXURY SLATE GLASS */
.std-main-card {
  background: rgba(13, 17, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 26px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: all 0.3s ease;
}

.std-main-card:hover {
  border-color: rgba(0, 242, 254, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* Module Block */
.std-module-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.std-module-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.std-step-num {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.25);
  color: #00f2fe;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.std-module-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.std-module-label {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.std-module-sub {
  font-size: 11.5px;
  color: #64748b;
}

/* Input Field */
.std-input-wrapper {
  position: relative;
  width: 100%;
}

.std-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #00f2fe;
  font-size: 14px;
}

.std-cyber-input {
  width: 100%;
  background: rgba(8, 11, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 13px 16px 13px 44px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s ease;
}

.std-cyber-input:focus {
  border-color: #00f2fe;
  background: rgba(10, 15, 28, 0.95);
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.2);
  outline: none;
}

.std-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.std-chip-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 5px 13px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.std-chip-item:hover {
  background: rgba(0, 242, 254, 0.12);
  border-color: #00f2fe;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Hz Cards Grid */
.std-hz-auto-badge {
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.25);
  color: #00f2fe;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  align-self: flex-start;
}

.std-hz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 600px) {
  .std-hz-grid {
    grid-template-columns: 1fr;
  }
}

.std-hz-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.std-hz-card:hover {
  background: rgba(0, 242, 254, 0.06);
  border-color: rgba(0, 242, 254, 0.35);
  transform: translateY(-2px);
}

.std-hz-card.selected {
  background: rgba(0, 242, 254, 0.12);
  border-color: #00f2fe;
  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.18);
}

.std-hz-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.std-hz-icon-box.gold {
  background: rgba(255, 184, 0, 0.1);
  color: #ffb800;
  border: 1px solid rgba(255, 184, 0, 0.25);
}

.std-hz-icon-box.cyan {
  background: rgba(0, 242, 254, 0.1);
  color: #00f2fe;
  border: 1px solid rgba(0, 242, 254, 0.25);
}

.std-hz-icon-box.magenta {
  background: rgba(255, 0, 127, 0.1);
  color: #ff007f;
  border: 1px solid rgba(255, 0, 127, 0.25);
}

.std-hz-info {
  flex: 1;
}

.std-hz-val {
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
}

.std-hz-desc {
  font-size: 11px;
  color: #94a3b8;
}

/* Playstyle Cards */
.std-style-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.std-style-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  overflow: hidden;
}

.std-style-card:hover {
  background: rgba(0, 242, 254, 0.06);
  border-color: rgba(0, 242, 254, 0.3);
  transform: translateX(4px);
}

.std-style-card.selected {
  background: rgba(0, 242, 254, 0.1);
  border-color: #00f2fe;
  border-left: 4px solid #00f2fe;
  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.15);
}

.std-style-halo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.std-style-halo.cyan {
  background: rgba(0, 242, 254, 0.1);
  color: #00f2fe;
  border: 1px solid rgba(0, 242, 254, 0.25);
}

.std-style-halo.magenta {
  background: rgba(255, 0, 127, 0.1);
  color: #ff007f;
  border: 1px solid rgba(255, 0, 127, 0.25);
}

.std-style-halo.green {
  background: rgba(0, 255, 157, 0.1);
  color: #00ff9d;
  border: 1px solid rgba(0, 255, 157, 0.25);
}

.std-style-body {
  flex: 1;
}

.std-style-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.std-style-title-row h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.std-style-body p {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

.std-style-tag {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}

.std-style-tag.cyan {
  background: rgba(0, 242, 254, 0.12);
  color: #00f2fe;
  border: 1px solid rgba(0, 242, 254, 0.25);
}

.std-style-tag.magenta {
  background: rgba(255, 0, 127, 0.12);
  color: #ff007f;
  border: 1px solid rgba(255, 0, 127, 0.25);
}

.std-style-tag.green {
  background: rgba(0, 255, 157, 0.12);
  color: #00ff9d;
  border: 1px solid rgba(0, 255, 157, 0.25);
}

/* VIP Store Service Package Cards (Clean Static Cyber Glass) */
.vip-pkg-card,
.service-pkg-card {
    position: relative;
    background: rgba(16, 7, 34, 0.85);
    border: 1.5px solid rgba(0, 242, 254, 0.35);
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 242, 254, 0.15);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.vip-pkg-card:hover,
.service-pkg-card:hover {
    transform: translateY(-4px);
    border-color: #00f2fe;
    box-shadow: 0 8px 30px rgba(0, 242, 254, 0.4), 0 0 20px rgba(255, 0, 127, 0.25);
}

.vip-pkg-card::before,
.vip-pkg-card::after,
.service-pkg-card::before,
.service-pkg-card::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

/* Actions Bar */
.std-actions-bar {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.std-btn-main {
  position: relative;
  flex: 1;
  padding: 16px 20px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 114, 255, 0.35);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.std-btn-main:hover {
  box-shadow: 0 8px 25px rgba(0, 114, 255, 0.5);
  transform: translateY(-2px);
}

.std-btn-main:active {
  transform: translateY(1px);
}

.std-btn-reset {
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.std-btn-reset:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Results Console */
.std-result-console {
  background: rgba(8, 11, 18, 0.95);
  border: 1px solid rgba(0, 242, 254, 0.25);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  animation: fadeInUp 0.4s ease;
}

.std-console-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: 10px;
}

.std-console-dots {
  display: flex;
  gap: 6px;
}

.std-console-dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.std-console-dots .dot.red { background: #ff5f56; }
.std-console-dots .dot.yellow { background: #ffbd2e; }
.std-console-dots .dot.green { background: #27c93f; }

.std-console-heading {
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.std-power-tag {
  background: rgba(0, 255, 157, 0.12);
  border: 1px solid rgba(0, 255, 157, 0.3);
  color: #00ff9d;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.std-console-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 500px) {
  .std-console-grid {
    grid-template-columns: 1fr;
  }
}

.std-res-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
}

.std-res-item.fire-btn-item {
  grid-column: 1 / -1;
  background: rgba(255, 0, 127, 0.08);
  border-color: rgba(255, 0, 127, 0.25);
}

.std-res-label {
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.std-res-label.highlight {
  color: #ff77aa;
  font-weight: 700;
}

.std-res-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15.5px;
  font-weight: 800;
}

.std-res-val.cyan { color: #00f2fe; }
.std-res-val.magenta { color: #ff007f; }

.std-btn-tune {
  width: 100%;
  padding: 15px;
  border: 1px solid var(--cyan-accent);
  border-radius: 14px;
  background: rgba(0, 242, 254, 0.12);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.std-btn-tune:hover {
  background: rgba(0, 242, 254, 0.25);
  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.3);
  transform: translateY(-1px);
}

/* ==================================================
   PAGE 2: TINH CHỈNH ĐỘ NHẠY FREE FIRE (PAGE-SENSI V6.0)
   ================================================== */
.page-sensi-container {
  max-width: 1120px;
  margin: 15px auto 40px auto;
  padding: 0 12px;
}

.sensi-hero-header {
  text-align: center;
  margin-bottom: 26px;
}

.sensi-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 255, 157, 0.08);
  border: 1px solid rgba(0, 255, 157, 0.22);
  border-radius: 20px;
  padding: 5px 16px;
  color: #00ff9d;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.sensi-hero-title {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.sensi-hero-desc {
  color: #94a3b8;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 660px;
  margin: 0 auto;
}

.sensi-grid-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 900px) {
  .sensi-grid-layout {
    grid-template-columns: 1fr;
  }
}

.sensi-glass-card {
  background: rgba(13, 17, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  padding: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.sensi-glass-card:hover {
  border-color: rgba(0, 242, 254, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* Control Strips */
.sensi-strip-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 11px;
  transition: all 0.25s ease;
}

.sensi-strip-card:hover {
  background: rgba(0, 242, 254, 0.05);
  border-color: rgba(0, 242, 254, 0.3);
  transform: translateY(-1px);
}

.sensi-strip-card.fire-btn-strip {
  background: rgba(255, 0, 127, 0.06);
  border: 1px solid rgba(255, 0, 127, 0.25);
}

/* ==================================================
   PAGE 2: TINH CHỈNH ĐỘ NHẠY FREE FIRE (PAGE-SENSI REFINED GLASSMORPHISM)
   ================================================== */
.page-sensi-container {
  max-width: 1140px;
  margin: 15px auto 40px auto;
  padding: 0 12px;
}

.sensi-hero-header {
  text-align: center;
  margin-bottom: 26px;
}

.sensi-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 255, 157, 0.08);
  border: 1px solid rgba(0, 255, 157, 0.22);
  border-radius: 20px;
  padding: 5px 16px;
  color: #00ff9d;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.sensi-hero-title {
  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.sensi-hero-desc {
  color: #94a3b8;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 660px;
  margin: 0 auto;
}

.sensi-grid-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 900px) {
  .sensi-grid-layout {
    grid-template-columns: 1fr;
  }
}

/* PROMINENT GLOWING CONFIRMATION BUTTON */
.sensi-btn-confirm {
  position: relative;
  width: 100%;
  padding: 16px 20px;
  margin-top: 18px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #00f2fe 0%, #0072ff 50%, #7928ca 100%);
  background-size: 200% 200%;
  color: #ffffff;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 242, 254, 0.45);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  animation: pulseGlowBtn 2s infinite alternate;
}

@keyframes pulseGlowBtn {
  0% {
    box-shadow: 0 6px 22px rgba(0, 242, 254, 0.4);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 10px 38px rgba(0, 242, 254, 0.75), 0 0 25px rgba(121, 40, 202, 0.6);
    transform: scale(1.01);
  }
}

.sensi-btn-confirm:hover {
  transform: translateY(-2px) scale(1.02);
  background-position: 100% 0;
}

.sensi-btn-edit {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  border-radius: 18px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sensi-btn-edit:hover {
  background: rgba(0, 242, 254, 0.15);
  border-color: #00f2fe;
  color: #ffffff;
}

/* GREEN CONFIRMATION SUBMIT BUTTON */
.sensi-btn-submit-green {
  position: relative;
  width: 100%;
  padding: 16px 20px;
  margin-top: 18px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #00ff9d 0%, #00b894 100%);
  color: #051a10;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 255, 157, 0.45), 0 0 20px rgba(0, 255, 157, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  animation: pulseGlowGreen 2s infinite alternate;
}

@keyframes pulseGlowGreen {
  0% {
    box-shadow: 0 6px 22px rgba(0, 255, 157, 0.4);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 10px 38px rgba(0, 255, 157, 0.75), 0 0 30px rgba(0, 255, 157, 0.5);
    transform: scale(1.01);
  }
}

.sensi-btn-submit-green:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, #05ffaa 0%, #00d29d 100%);
  box-shadow: 0 12px 40px rgba(0, 255, 157, 0.8);
}

/* Sub-style pills */
.substyle-options {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.substyle-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 5px 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.25s ease;
}

.substyle-pill.active {
  background: linear-gradient(135deg, rgba(0, 255, 157, 0.22) 0%, rgba(0, 242, 254, 0.22) 100%);
  border: 1px solid #00ff9d;
  color: #00ff9d;
  box-shadow: 0 0 14px rgba(0, 255, 157, 0.35);
  text-shadow: 0 0 8px rgba(0, 255, 157, 0.5);
}

.substyle-pill:not(.active):hover {
  background: rgba(0, 242, 254, 0.1);
  border-color: rgba(0, 242, 254, 0.4);
  color: #e2e8f0;
}

/* GLASSMORPHISM CARD STYLING FOR LEFT & RIGHT CARDS */
.sensi-glass-card {
  position: relative;
  background: rgba(14, 16, 32, 0.62);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 14px;
  padding: 22px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 0 18px rgba(168, 85, 247, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sensi-glass-card:hover {
  border-color: rgba(0, 242, 254, 0.5);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(0, 242, 254, 0.2), 0 0 25px rgba(0, 242, 254, 0.25);
  transform: translateY(-2px);
}

/* Card Header Styles */
.sensi-glass-card .card-header {
  background: linear-gradient(180deg, rgba(24, 18, 48, 0.7) 0%, rgba(12, 9, 28, 0.4) 100%);
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Badge TRANG 2 / 3 - Rounded Pill */
.sensi-glass-card .cyber-tag {
  background: rgba(10, 15, 30, 0.85) !important;
  border: 1px solid rgba(0, 242, 254, 0.4) !important;
  color: #00f2fe !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.2) !important;
  letter-spacing: 0.5px;
}

/* Badge OPTIMIZED on Right Card - Gold Rounded Pill */
.sensi-glass-card .cyber-tag[style*="var(--gold-accent)"] {
  background: rgba(255, 184, 0, 0.12) !important;
  border: 1px solid rgba(255, 184, 0, 0.45) !important;
  color: #ffb800 !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.3) !important;
}

/* Input "Tên Thiết Bị / Mẫu Máy" */
.device-autocomplete-input {
  background: rgba(10, 8, 25, 0.75) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  transition: all 0.25s ease !important;
}

.device-autocomplete-input:focus {
  border-color: #00f2fe !important;
  background: rgba(12, 16, 35, 0.9) !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.3) !important;
  outline: none !important;
}

/* 6 Sensitivity Strips + 1 Fire Button Strip */
.sensi-strip-card {
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: 10px;
  padding: 13px 15px;
  margin-bottom: 14px;
  transition: all 0.25s ease;
}

.sensi-strip-card:hover {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(0, 242, 254, 0.4);
  transform: translateY(-1px);
}

.sensi-strip-card.fire-btn-strip {
  background: rgba(255, 0, 127, 0.06);
  border: 1px solid rgba(255, 0, 127, 0.25);
  box-shadow: 0 0 12px rgba(255, 0, 127, 0.1);
}

.sensi-strip-card.fire-btn-strip:hover {
  background: rgba(255, 0, 127, 0.12);
  border-color: rgba(255, 0, 127, 0.5);
}

.sensi-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sensi-strip-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sensi-strip-title i {
  filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.6));
  font-size: 14px;
}

.sensi-strip-title.fire-btn-title {
  color: #ff77aa;
}

/* Badge "Hợp lệ" Compact Styling */
.status-badge.status-valid {
  background: rgba(0, 255, 157, 0.08) !important;
  border: 1px solid rgba(0, 255, 157, 0.3) !important;
  color: #00ff9d !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  border-radius: 12px !important;
  box-shadow: 0 0 6px rgba(0, 255, 157, 0.15) !important;
}

.sensi-strip-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sensi-slider-box {
  flex: 1;
}

/* Range Slider Styling (Bolder & High-Contrast for Trang Tinh Chỉnh Sensi) */
#page-sensi #sensitivity-form .cyber-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
  outline: none;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6), 0 0 10px rgba(245, 158, 11, 0.35);
  border: 1px solid rgba(245, 158, 11, 0.45);
}

#page-sensi #sensitivity-form .cyber-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6), 0 0 18px rgba(217, 119, 6, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#page-sensi #sensitivity-form .cyber-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.8), 0 0 24px rgba(251, 191, 36, 0.6);
}

#page-sensi #sensitivity-form .cyber-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
  cursor: pointer;
}

#page-sensi #sensitivity-form .fire-btn-strip .cyber-slider {
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6), 0 0 10px rgba(245, 158, 11, 0.35);
  border: 1px solid rgba(245, 158, 11, 0.45);
}

#page-sensi #sensitivity-form .fire-btn-strip .cyber-slider::-webkit-slider-thumb {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6), 0 0 18px rgba(217, 119, 6, 0.4);
}

/* Number Input Pill */
.sensi-number-input {
  width: 70px;
  background: rgba(10, 18, 35, 0.85);
  border: 1px solid rgba(0, 242, 254, 0.4);
  border-radius: 16px;
  padding: 5px 8px;
  color: #00f2fe;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.15);
  transition: all 0.2s ease;
}

.sensi-number-input:focus {
  border-color: #00f2fe;
  background: rgba(12, 24, 45, 0.95);
  box-shadow: 0 0 14px rgba(0, 242, 254, 0.4);
  outline: none;
}

/* Form Submit Button */
.sensi-btn-submit {
  width: 100%;
  padding: 16px 20px;
  margin-top: 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #a855f7 0%, #00c6ff 50%, #0072ff 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.35);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sensi-btn-submit:hover {
  box-shadow: 0 8px 25px rgba(0, 242, 254, 0.5), 0 0 20px rgba(168, 85, 247, 0.4);
  transform: translateY(-2px);
}

.sensi-btn-submit:active {
  transform: translateY(1px);
}

/* Right Card Placeholder State (#output-placeholder) */
.output-placeholder {
  text-align: center;
  padding: 35px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.output-placeholder i {
  font-size: 48px;
  color: #a855f7;
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
  animation: cpuPulse 2.5s ease-in-out infinite;
}

@keyframes cpuPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.5));
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 22px rgba(236, 72, 153, 0.8));
  }
}

.output-placeholder h3 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
}

.output-placeholder p {
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto;
}

/* Reset Full Button */
.sensi-btn-reset-full {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  border-radius: 14px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sensi-btn-reset-full:hover {
  background: rgba(255, 85, 85, 0.15);
  border-color: #ff5555;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 85, 85, 0.3);
}

/* INITIAL NEON CYAN BLUE SUBMIT BUTTON */
.sensi-btn-submit-cyan {
  position: relative;
  width: 100%;
  padding: 16px 20px;
  margin-top: 18px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #00f2fe 0%, #0072ff 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 242, 254, 0.45);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  animation: pulseGlowCyan 2s infinite alternate;
}

@keyframes pulseGlowCyan {
  0% {
    box-shadow: 0 6px 22px rgba(0, 242, 254, 0.4);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 10px 38px rgba(0, 242, 254, 0.75), 0 0 25px rgba(0, 114, 255, 0.6);
    transform: scale(1.01);
  }
}

.sensi-btn-submit-cyan:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, #38f9d7 0%, #43e97b 100%);
}

/* History Card Styling - Horizontal Row Layout */
.history-list-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.history-row-item {
  background: rgba(12, 10, 28, 0.75);
  border: 1px solid rgba(0, 242, 254, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.25s ease;
}

.history-row-item:hover {
  border-color: #00f2fe;
  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.2);
  transform: translateX(4px);
}

.history-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#history-modal,
.history-list-grid,
.history-row-item,
.history-row-title,
.history-row-num,
.history-row-time,
.history-chip,
.history-tag-pink,
.btn-load-history,
.btn-del-history {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
}

.history-row-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--gold-accent);
}

.history-row-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  flex: 1;
}

.history-row-time {
  font-size: 11px;
  color: #94a3b8;
}

.history-row-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 11px;
  color: #cbd5e1;
}

.history-tag-pink {
  background: rgba(255, 119, 170, 0.1);
  border: 1px solid rgba(255, 119, 170, 0.3);
  border-radius: 8px;
  padding: 2px 8px;
  font-size: 11px;
  color: #ff77aa;
  font-weight: 700;
}

.history-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.btn-load-history {
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid rgba(0, 242, 254, 0.3);
  color: #00f2fe;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-load-history:hover {
  background: rgba(0, 242, 254, 0.25);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
}

.btn-del-history {
  background: rgba(255, 85, 85, 0.1);
  border: 1px solid rgba(255, 85, 85, 0.25);
  color: #ff5555;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-del-history:hover {
  background: rgba(255, 85, 85, 0.25);
  color: #ffffff;
}

/* Animated Glowing Copyright Subtitle */
.copyright-glow-text {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #ffd700 0%, #00f2fe 50%, #ff0055 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: copyrightShimmer 3s linear infinite, glowPulseText 2s ease-in-out infinite alternate;
  display: inline-block;
  margin-top: 6px;
  text-align: center;
}

/* Soft & Elegant 3D Brand Title with Anti-Glare Glow Animation */
.lux-brand-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #00f2fe 0%, #ff007f 35%, #ffd700 70%, #00f2fe 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin-bottom: 6px;
  text-align: center;
  position: relative;
  transform-origin: center center;
  will-change: transform;
  /* Soft & Clean 3D Extrusion Layers */
  filter: 
    drop-shadow(1px 1px 0px rgba(0, 242, 254, 0.6))
    drop-shadow(2px 2px 0px rgba(255, 0, 127, 0.5))
    drop-shadow(3px 3px 0px rgba(255, 215, 0, 0.4))
    drop-shadow(0px 0px 8px rgba(0, 242, 254, 0.35));
  animation: brandShimmer 3.5s linear infinite, brandPulseZoom 2.2s ease-in-out infinite alternate;
}

@keyframes brandShimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 300% center;
  }
}

@keyframes brandPulseZoom {
  0% {
    transform: scale(0.97);
    filter: 
      drop-shadow(1px 1px 0px rgba(0, 242, 254, 0.6))
      drop-shadow(2px 2px 0px rgba(255, 0, 127, 0.5))
      drop-shadow(3px 3px 0px rgba(255, 215, 0, 0.4))
      drop-shadow(0px 0px 6px rgba(0, 242, 254, 0.3));
  }
  100% {
    transform: scale(1.07);
    filter: 
      drop-shadow(1.5px 1.5px 0px rgba(0, 242, 254, 0.75))
      drop-shadow(3px 3px 0px rgba(255, 0, 127, 0.65))
      drop-shadow(4px 4px 0px rgba(255, 215, 0, 0.55))
      drop-shadow(0px 0px 12px rgba(0, 242, 254, 0.45));
  }
}

/* ==========================================
   PURE EDGE RUNNING BORDER FOR CONTENT FRAMES
   (ORIGINAL CARD BACKGROUND 100% PRESERVED)
   ========================================== */

@property --frame-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes frameBorderRotate {
  0% {
    --frame-border-angle: 0deg;
  }
  100% {
    --frame-border-angle: 360deg;
  }
}

/* CLEAN STATIC BORDER FOR CONTENT FRAMES & STORE PACKAGES */
.running-border-card,
.vip-pkg-card,
.service-pkg-card,
.cyber-card,
.vip-store-card,
#page-store .cyber-card,
#page-store .vip-pkg-card,
#page-store .service-pkg-card,
#page-store .sens-row-card {
  position: relative !important;
  background: rgba(16, 7, 34, 0.88) !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(0, 240, 255, 0.35) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.running-border-card::before,
.running-border-card::after,
.vip-pkg-card::before,
.vip-pkg-card::after,
.service-pkg-card::before,
.service-pkg-card::after,
.vip-store-card::before,
.vip-store-card::after,
#page-store .vip-pkg-card::before,
#page-store .vip-pkg-card::after,
#page-store .service-pkg-card::before,
#page-store .service-pkg-card::after,
#page-store .cyber-card::before,
#page-store .cyber-card::after,
#page-store .sens-row-card::before,
#page-store .sens-row-card::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

.running-border-card:hover,
.vip-pkg-card:hover,
.service-pkg-card:hover,
.cyber-card:hover,
.vip-store-card:hover,
#page-store .vip-pkg-card:hover,
#page-store .service-pkg-card:hover,
#page-store .cyber-card:hover,
#page-store .sens-row-card:hover {
  transform: translateY(-4px) !important;
  border-color: #00f2fe !important;
  box-shadow: 0 8px 30px rgba(0, 242, 254, 0.4), 0 0 20px rgba(255, 0, 127, 0.25) !important;
}

@keyframes copyrightShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes glowPulseText {
  0% { filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4)); }
  100% { filter: drop-shadow(0 0 14px rgba(0, 242, 254, 0.8)); }
}

/* ==========================================
   NEW VIP STORE & PACKAGES STYLES
   ========================================== */
@property --vip-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes vipBorderSpin {
  0% { --vip-angle: 0deg; }
  100% { --vip-angle: 360deg; }
}

.vip-store-card,
.vip-pkg-card {
  position: relative;
  background: rgba(16, 9, 32, 0.88);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vip-store-card::before,
.vip-pkg-card::before {
  display: none !important;
  content: none !important;
  animation: none !important;
}

.vip-pkg-card {
  border-radius: 12px;
  padding: 20px;
  background: rgba(22, 13, 44, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vip-pkg-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 35px rgba(0, 240, 255, 0.25);
}

.feedback-card-item {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.feedback-card-item:hover {
  border-color: var(--cyan-accent);
  transform: translateY(-3px);
}

/* ==========================================
   GATEKEEPER BACKGROUND VIDEO & SMOOTH UNLOCK TRANSITION
   ========================================== */
#app-license-gatekeeper {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  perspective: 1200px;
  perspective-origin: center center;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), filter 0.7s ease !important;
}

#app-license-gatekeeper.gatekeeper-fade-out {
  opacity: 0 !important;
  transform: scale(1.08) !important;
  filter: blur(14px) !important;
  pointer-events: none !important;
}

.gatekeeper-video-wrap {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background: transparent !important;
  background-color: transparent !important;
}

.gatekeeper-video-bg,
video[id*="gatekeeper-video"] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease-in-out !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  background-color: transparent !important;
}

.gatekeeper-video-bg.video-playing,
video[id*="gatekeeper-video"].video-playing {
  opacity: 1 !important;
}

#auth-poster-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: url('assets/poster.jpg') center/cover no-repeat !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.dpi-vip-video-bg,
#dpi-gatekeeper-video-1,
#dpi-gatekeeper-video-2 {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  transform: none !important;
  -webkit-transform: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  background-color: transparent !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none !important;
}

.gatekeeper-canvas-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
  z-index: -2;
  pointer-events: none;
  display: block;
}

.gatekeeper-video-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================
   NEW HIGH-TECH GATEKEEPER CARD BOX (PERFORMANCE OPTIMIZED 60FPS)
   ========================================== */
.gatekeeper-card-box {
  position: relative;
  max-width: 490px;
  width: 100%;
  text-align: center;
  padding: 36px 26px 28px 26px;
  background: rgba(6, 2, 18, 0.15) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  border-radius: 20px;
  border: 2px solid rgba(0, 242, 254, 0.85) !important;
  box-shadow: 0 0 30px rgba(0, 242, 254, 0.4), inset 0 0 20px rgba(0, 242, 254, 0.15);
  z-index: 2;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint;
  transition: opacity 0.35s ease-out, transform 0.35s ease-out, visibility 0.35s ease-out;
}

.gatekeeper-card-box.video-ready {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: modalPopIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards, gatekeeperAuraGlow 4s ease-in-out 0.32s infinite alternate;
}

@keyframes modalPopIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.92);
    will-change: transform, opacity;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    will-change: auto;
  }
}

@keyframes gatekeeperAuraGlow {
  0% {
    border-color: rgba(0, 242, 254, 0.75);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.3), inset 0 0 15px rgba(0, 242, 254, 0.1);
  }
  50% {
    border-color: rgba(214, 0, 255, 0.85);
    box-shadow: 0 0 25px rgba(214, 0, 255, 0.35), inset 0 0 18px rgba(214, 0, 255, 0.15);
  }
  100% {
    border-color: rgba(0, 242, 254, 0.85);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.3), inset 0 0 15px rgba(0, 242, 254, 0.1);
  }
}

.gatekeeper-card-box.card-box-fade-out {
  opacity: 0 !important;
  transform: scale(0.92) translateY(-15px) !important;
  filter: blur(10px) !important;
  pointer-events: none !important;
  animation: none !important;
}

/* High-tech corner HUD brackets (Top-Left & Bottom-Right) */
.gatekeeper-card-box::before,
.gatekeeper-card-box::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
  z-index: 3;
}

.gatekeeper-card-box::before {
  top: -3px;
  left: -3px;
  border-top: 3.5px solid #00f2fe;
  border-left: 3.5px solid #00f2fe;
  border-top-left-radius: 20px;
  filter: drop-shadow(0 0 10px #00f2fe);
}

.gatekeeper-card-box::after {
  bottom: -3px;
  right: -3px;
  border-bottom: 3.5px solid #d600ff;
  border-right: 3.5px solid #d600ff;
  border-bottom-right-radius: 20px;
  filter: drop-shadow(0 0 10px #d600ff);
}

.gatekeeper-card-header {
  margin-bottom: 24px;
  animation: gatekeeperItemSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.gatekeeper-form-wrap {
  animation: gatekeeperItemSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both;
}

.gatekeeper-card-footer {
  animation: gatekeeperItemSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both;
}

@keyframes gatekeeperItemSlideUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shieldFloatPulse {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.35), inset 0 0 12px rgba(0, 240, 255, 0.2);
    border-color: rgba(0, 240, 255, 0.4);
  }
  50% {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 0 35px rgba(0, 240, 255, 0.7), 0 0 18px rgba(214, 0, 255, 0.5), inset 0 0 20px rgba(0, 240, 255, 0.4);
    border-color: rgba(0, 240, 255, 0.85);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.35), inset 0 0 12px rgba(0, 240, 255, 0.2);
    border-color: rgba(0, 240, 255, 0.4);
  }
}

@keyframes shieldIconShimmer {
  0% {
    filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.6));
    color: var(--cyan-accent);
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(214, 0, 255, 0.95));
    color: #e066ff;
  }
  100% {
    filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.6));
    color: var(--cyan-accent);
  }
}

.gatekeeper-shield-icon {
  position: relative;
  width: 68px;
  height: 68px;
  margin: 0 auto 14px auto;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(0, 240, 255, 0.18) 0%, rgba(6, 2, 16, 0.6) 100%);
  border: 1.5px solid rgba(0, 240, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--cyan-accent);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.35);
  animation: shieldFloatPulse 3.5s ease-in-out infinite;
}

.gatekeeper-shield-icon i {
  animation: shieldIconShimmer 3.5s ease-in-out infinite;
}

/* Outer rotating dashed tech halo ring around shield icon */
.gatekeeper-shield-icon::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 240, 255, 0.45);
  animation: spin 12s linear infinite;
  pointer-events: none;
}

.gatekeeper-brand-title {
  font-family: var(--font-tech);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--cyan-accent);
  margin-bottom: 6px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 240, 255, 0.9);
}

@keyframes titleLightSweep {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

.gatekeeper-main-heading {
  font-family: var(--font-heading);
  font-size: 21.5px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 10px 0;
  letter-spacing: 0.6px;
  background: linear-gradient(90deg, #00f2fe 0%, #00f2fe 35%, #ffffff 50%, #e066ff 65%, #00f2fe 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleLightSweep 3s linear infinite;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 16px rgba(0, 242, 254, 0.85));
}

.gatekeeper-subtitle-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #ffffff;
  background: rgba(0, 242, 254, 0.28);
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(0, 242, 254, 0.75);
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.4);
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95);
}

.gatekeeper-form-wrap {
  max-width: 400px;
  margin: 0 auto 20px auto;
}

.gatekeeper-input-group {
  position: relative;
  margin-bottom: 14px;
}

.gatekeeper-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cyan-accent);
  font-size: 16px;
  filter: drop-shadow(0 0 8px #00f2fe) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9));
}

.gatekeeper-tech-input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  border: 2px solid rgba(0, 240, 255, 0.75) !important;
  border-radius: 12px;
  color: #ffffff !important;
  font-size: 14.5px;
  font-weight: 800 !important;
  letter-spacing: 1.2px;
  text-align: center;
  transition: all 0.3s ease;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.25);
}

.gatekeeper-tech-input::placeholder {
  font-style: italic;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.3px;
  opacity: 1;
  transition: opacity 0.25s ease;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
}

.gatekeeper-tech-input:focus::placeholder {
  opacity: 0.3;
  transform: none;
}

.gatekeeper-tech-input:focus {
  outline: none;
  border-color: var(--cyan-accent) !important;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.6) !important;
  background: rgba(6, 2, 18, 0.55) !important;
}

.gatekeeper-tech-btn {
  width: 100%;
  padding: 15px;
  font-size: 14.5px;
  font-weight: 900;
  font-family: var(--font-heading);
  color: #ffffff;
  background: linear-gradient(135deg, #00f2fe 0%, #7928ca 50%, #d600ff 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 25px rgba(0, 242, 254, 0.5);
  transition: all 0.3s ease;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.gatekeeper-tech-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 242, 254, 0.55);
}

.gatekeeper-error-msg {
  display: none;
  color: #ff3366;
  font-size: 12.5px;
  margin-top: 10px;
  background: rgba(255, 51, 102, 0.1);
  border: 1px solid rgba(255, 51, 102, 0.4);
  padding: 10px 14px;
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-tech);
}

.gatekeeper-card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.gatekeeper-buy-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gatekeeper-buy-label {
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gatekeeper-buy-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  color: var(--cyan-accent);
  background: rgba(0, 240, 255, 0.2);
  border: 1.5px solid rgba(0, 240, 255, 0.75);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

.gatekeeper-buy-btn:hover {
  background: rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
}

.gatekeeper-hwid-box {
  font-size: 11.5px;
  font-weight: 700;
  color: #00f2fe;
  background: rgba(0, 0, 0, 0.45);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(0, 240, 255, 0.55);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95);
}

/* ==========================================
   NEW HACKER-STYLE KEY VERIFICATION OVERLAY (NO CARD BOX - TRANSPARENT VIEWPORT)
   ========================================== */
.gatekeeper-loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 2, 18, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
  transition: opacity 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.27), transform 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.27), filter 0.55s ease;
}

.gatekeeper-loading-overlay.loading-overlay-hidden {
  opacity: 0 !important;
  transform: scale(1.1) !important;
  filter: blur(12px) !important;
  pointer-events: none !important;
}

.gatekeeper-loading-overlay.loading-overlay-visible {
  opacity: 1 !important;
  transform: scale(1) !important;
  filter: blur(0px) !important;
  pointer-events: auto !important;
}

.cyber-loading-avatar.success-burst {
  animation: avatarSuccessBurst 0.65s ease-out forwards !important;
}

@keyframes avatarSuccessBurst {
  0% {
    transform: scale(1);
    box-shadow: 0 0 40px #ffffff;
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 100px #00ff9d, 0 0 160px #ffffff, 0 0 220px #00f2fe;
  }
  100% {
    transform: scale(1.05);
    box-shadow: 0 0 80px #00ff9d, 0 0 120px #ffffff;
  }
}

#app-content.app-reveal-entrance {
  animation: appEntranceReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes appEntranceReveal {
  0% {
    opacity: 0;
    transform: scale(0.95);
    filter: blur(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
}

/* Avatar centered with Holographic HUD Target, Orbital Satellites & Pure White Progress Bar */
@keyframes radarSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes reverseSpin {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

@keyframes energyPulseExpand {
  0% {
    transform: scale(0.92);
    opacity: 0.35;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  }
  50% {
    transform: scale(1.15);
    opacity: 0.95;
    box-shadow: 0 0 45px rgba(255, 255, 255, 0.9), 0 0 35px rgba(0, 242, 254, 0.85);
  }
  100% {
    transform: scale(0.92);
    opacity: 0.35;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  }
}

@keyframes avatarSuperPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.9), 0 0 50px rgba(0, 242, 254, 0.7), inset 0 0 20px rgba(255, 255, 255, 0.5);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 60px rgba(255, 255, 255, 1), 0 0 90px rgba(0, 242, 254, 0.9), 0 0 45px rgba(214, 0, 255, 0.8), inset 0 0 30px rgba(255, 255, 255, 0.8);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.9), 0 0 50px rgba(0, 242, 254, 0.7), inset 0 0 20px rgba(255, 255, 255, 0.5);
  }
}

@keyframes hudBracketPulse {
  0%, 100% {
    opacity: 0.7;
    filter: drop-shadow(0 0 6px #00f2fe);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 16px #ffffff) drop-shadow(0 0 25px #00f2fe);
    transform: scale(1.06);
  }
}

@keyframes orbitRotate1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.cyber-avatar-ring-wrap {
  position: relative;
  width: 170px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

@keyframes targetBracketsSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hud-target-spin-wrap {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 12;
  animation: targetBracketsSpin 7s linear infinite;
}

/* 4 Corner HUD Target Lock Brackets (Bold High-Contrast Sci-Fi Borders) */
.hud-target-bracket {
  position: absolute;
  width: 32px;
  height: 32px;
  z-index: 12;
  animation: hudBracketPulse 2s ease-in-out infinite;
  pointer-events: none;
}

.hud-target-bracket.top-left {
  top: 0;
  left: 0;
  border-top: 5px solid #ffffff;
  border-left: 5px solid #00f2fe;
  border-top-left-radius: 6px;
  filter: drop-shadow(0 0 14px #ffffff) drop-shadow(0 0 24px #00f2fe);
}

.hud-target-bracket.top-right {
  top: 0;
  right: 0;
  border-top: 5px solid #ffffff;
  border-right: 5px solid #00f2fe;
  border-top-right-radius: 6px;
  filter: drop-shadow(0 0 14px #ffffff) drop-shadow(0 0 24px #00f2fe);
}

.hud-target-bracket.bottom-left {
  bottom: 0;
  left: 0;
  border-bottom: 5px solid #ffffff;
  border-left: 5px solid #00f2fe;
  border-bottom-left-radius: 6px;
  filter: drop-shadow(0 0 14px #ffffff) drop-shadow(0 0 24px #00f2fe);
}

.hud-target-bracket.bottom-right {
  bottom: 0;
  right: 0;
  border-bottom: 5px solid #ffffff;
  border-right: 5px solid #00f2fe;
  border-bottom-right-radius: 6px;
  filter: drop-shadow(0 0 14px #ffffff) drop-shadow(0 0 24px #00f2fe);
}

/* Sci-Fi Rings (Bold & Extra High Glow) */
.cyber-avatar-ring.outer-tech-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3.5px dashed #ffffff;
  animation: radarSpin 8s linear infinite;
  box-shadow: 0 0 35px rgba(0, 242, 254, 0.9), 0 0 15px rgba(255, 255, 255, 0.8);
}

.cyber-avatar-ring.middle-neon-ring {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 4.5px solid transparent;
  border-top-color: #ffffff;
  border-bottom-color: #00f2fe;
  border-left-color: #d600ff;
  animation: reverseSpin 3s linear infinite;
  box-shadow: 0 0 45px rgba(0, 242, 254, 0.95), 0 0 25px rgba(255, 255, 255, 0.9);
}

.cyber-avatar-ring.inner-laser-ring {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  border: 3.5px solid #00ff9d;
  border-right-color: #ffffff;
  animation: radarSpin 4s ease-in-out infinite;
  filter: drop-shadow(0 0 20px #00ff9d) drop-shadow(0 0 18px #ffffff);
}

.cyber-avatar-ring.energy-ticks-ring {
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.8);
  animation: energyPulseExpand 2.2s ease-in-out infinite;
}

/* Orbital Energy Satellites (Bold Glowing Dots) */
.orbital-satellites-container {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  animation: orbitRotate1 5s linear infinite;
}

.orbit-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 20px #ffffff, 0 0 40px #00f2fe, 0 0 60px #ffffff;
}

.orbit-dot.dot-1 {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.orbit-dot.dot-2 {
  bottom: 15%;
  right: 5%;
  background: #00f2fe;
  box-shadow: 0 0 20px #00f2fe, 0 0 40px #d600ff;
}

.orbit-dot.dot-3 {
  bottom: 15%;
  left: 5%;
  background: #00ff9d;
  box-shadow: 0 0 20px #00ff9d, 0 0 35px #ffffff;
}

/* Core Avatar Container & Image (Bold Frame & Powerful Aura Glow) */
.cyber-avatar-box {
  position: relative;
  width: 114px;
  height: 114px;
  border-radius: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cyber-loading-avatar {
  width: 114px;
  height: 114px;
  border-radius: 50%;
  object-fit: cover;
  border: 4.5px solid #ffffff;
  box-shadow: 0 0 50px rgba(255, 255, 255, 1), 0 0 90px rgba(0, 242, 254, 0.9), 0 0 120px rgba(214, 0, 255, 0.8);
  animation: avatarSuperPulse 2.8s ease-in-out infinite;
  z-index: 5;
}

.cyber-avatar-live-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffffff, #00f2fe);
  color: #070510;
  font-size: 11px;
  font-weight: 900;
  font-family: var(--font-tech);
  padding: 4px 14px;
  border-radius: 14px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 25px rgba(255, 255, 255, 1), 0 0 40px rgba(0, 242, 254, 0.9);
  white-space: nowrap;
  z-index: 10;
  letter-spacing: 1px;
}

.cyber-loading-title {
  font-family: 'Rajdhani', 'Orbitron', sans-serif;
  font-size: 34px;
  font-weight: 900;
  color: #e056fd;
  margin: 18px 0 10px 0;
  letter-spacing: 2.2px;
  text-align: center;
  /* Thick 3D Block Extrusion + Single Neon Purple Glowing Aura */
  text-shadow: 
    0 1px 0 #c800ed,
    0 2px 0 #b000d6,
    0 3px 0 #9800ba,
    0 4px 0 #80009e,
    0 5px 0 #680082,
    0 6px 0 #4a005c,
    0 7px 10px rgba(0, 0, 0, 0.9),
    0 0 14px #d600ff,
    0 0 28px #d600ff,
    0 0 50px rgba(214, 0, 255, 0.7);
  text-transform: uppercase;
  line-height: 1.2;
}

.cyber-loading-subtitle {
  font-size: 12px;
  font-weight: 800;
  color: #00ff9d;
  letter-spacing: 1.2px;
  margin-top: 4px;
  margin-bottom: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 255, 157, 0.12);
  padding: 6px 18px;
  border-radius: 20px;
  border: 1.5px solid rgba(0, 255, 157, 0.6);
  box-shadow: 0 0 18px rgba(0, 255, 157, 0.35);
  text-shadow: 0 0 10px rgba(0, 255, 157, 0.8);
}

/* Progress bar 0 - 100% container (Thicker & Extra Glowing White Fill) */
.cyber-progress-container {
  width: 100%;
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.cyber-progress-bar-wrap {
  flex: 1;
  height: 14px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  border: 2px solid #ffffff;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
}

.cyber-progress-bar-fill {
  width: 0%;
  height: 100%;
  background: #ffffff !important;
  border-radius: 10px;
  transition: width 0.1s linear;
  box-shadow: 0 0 25px #ffffff, 0 0 50px #ffffff, 0 0 80px rgba(0, 242, 254, 0.8);
}

.cyber-progress-percent {
  font-family: var(--font-tech);
  font-size: 17px;
  font-weight: 900;
  color: #ffffff;
  min-width: 54px;
  text-align: right;
  text-shadow: 0 0 18px #ffffff, 0 0 35px rgba(0, 242, 254, 0.9);
}

/* Green Hacker console terminal - Fixed at bottom-left of full app viewport with NO BOX */
.cyber-hacker-console {
  position: fixed;
  bottom: 25px;
  left: 25px;
  max-width: 380px;
  width: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
  text-align: left;
  z-index: 1000000;
}

.console-header {
  font-family: monospace;
  font-size: 10.5px;
  font-weight: 800;
  color: #00ff9d;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-shadow: 0 0 10px rgba(0, 255, 157, 0.9);
  display: flex;
  align-items: center;
  gap: 6px;
}

.console-log-lines {
  font-family: monospace;
  font-size: 11px;
  color: #00ff9d;
  line-height: 1.5;
  max-height: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.console-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: fadeIn 0.25s ease-in-out;
  text-shadow: 0 0 8px rgba(0, 255, 157, 0.9);
}

/* App Contact Icon Buttons - Sharp Solid Style & Independent Icon Float Effect */
.cyber-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
}

.cyber-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, filter 0.28s ease !important;
  opacity: 1 !important;
}

/* ONLY the icon box floats up on hover */
.cyber-icon-btn:hover .cyber-icon-box {
  transform: translateY(-6px) scale(1.08) !important;
  filter: brightness(1.18);
}

.cyber-icon-btn:active .cyber-icon-box {
  transform: translateY(-2px) scale(0.96) !important;
}

.cyber-icon-label {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-tech), sans-serif;
  letter-spacing: 0.4px;
  transition: color 0.25s ease;
}

/* Soft & Elegant 3D Brand Title with Anti-Glare Glow Animation for Oreki.cute Admin Title */
.admin-title-glow {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #00f2fe 0%, #ff007f 35%, #ffd700 70%, #00f2fe 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin: 0;
  text-align: center;
  position: relative;
  transform-origin: center center;
  will-change: transform;
  /* Soft & Clean 3D Extrusion Layers */
  filter: 
    drop-shadow(1px 1px 0px rgba(0, 242, 254, 0.6))
    drop-shadow(2px 2px 0px rgba(255, 0, 127, 0.5))
    drop-shadow(3px 3px 0px rgba(255, 215, 0, 0.4))
    drop-shadow(0px 0px 8px rgba(0, 242, 254, 0.35));
  animation: brandShimmer 3.5s linear infinite, brandPulseZoom 2.2s ease-in-out infinite alternate;
}

/* Animated Shimmer Effect for Subtitle "Thông tin liên hệ của Admin Oreki.cute" */
.admin-sub-glow {
  font-family: var(--font-tech), sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin: 6px 0 0 0;
  letter-spacing: 0.6px;
  display: inline-block;
  background: linear-gradient(90deg, #00f2fe 0%, #ffffff 35%, #ffd700 65%, #00f2fe 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: adminSubShimmer 3.2s linear infinite;
  filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.45));
}

@keyframes adminSubShimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* Luxury Cyber Badges Trio Row below social app icons on Page 4 */
.verified-creator-badge {
  font-family: var(--font-tech), sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

/* Cyan Variant */
.verified-creator-badge.badge-cyan {
  border: 1.5px solid var(--cyan-accent);
  color: var(--cyan-accent);
  background: rgba(0, 242, 254, 0.12);
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.35), inset 0 0 10px rgba(0, 242, 254, 0.15);
  animation: verifiedBadgePulseCyan 2.4s ease-in-out infinite alternate;
}

.verified-creator-badge.badge-cyan:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.7), inset 0 0 15px rgba(0, 242, 254, 0.3);
  border-color: #ffffff;
  color: #ffffff;
}

/* Gold Variant */
.verified-creator-badge.badge-gold,
.verified-creator-badge:not([class*="badge-"]) {
  border: 1.5px solid var(--gold-accent);
  color: var(--gold-accent);
  background: rgba(255, 215, 0, 0.12);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.35), inset 0 0 10px rgba(255, 215, 0, 0.15);
  animation: verifiedBadgePulseGold 2.4s ease-in-out infinite alternate 0.4s;
}

.verified-creator-badge.badge-gold:hover,
.verified-creator-badge:not([class*="badge-"]):hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.7), inset 0 0 15px rgba(255, 215, 0, 0.3);
  border-color: #ffffff;
  color: #ffffff;
}

/* Pink Variant */
.verified-creator-badge.badge-pink {
  border: 1.5px solid var(--secondary-color);
  color: var(--secondary-color);
  background: rgba(255, 0, 85, 0.12);
  box-shadow: 0 0 15px rgba(255, 0, 85, 0.35), inset 0 0 10px rgba(255, 0, 85, 0.15);
  animation: verifiedBadgePulsePink 2.4s ease-in-out infinite alternate 0.8s;
}

.verified-creator-badge.badge-pink:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 0 25px rgba(255, 0, 85, 0.7), inset 0 0 15px rgba(255, 0, 85, 0.3);
  border-color: #ffffff;
  color: #ffffff;
}

@keyframes verifiedBadgePulseCyan {
  0% { box-shadow: 0 0 12px rgba(0, 242, 254, 0.25), inset 0 0 8px rgba(0, 242, 254, 0.1); transform: scale(1); }
  100% { box-shadow: 0 0 22px rgba(0, 242, 254, 0.55), inset 0 0 15px rgba(0, 242, 254, 0.25); transform: scale(1.04); }
}

@keyframes verifiedBadgePulseGold {
  0% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.25), inset 0 0 8px rgba(255, 215, 0, 0.1); transform: scale(1); }
  100% { box-shadow: 0 0 22px rgba(255, 215, 0, 0.55), inset 0 0 15px rgba(255, 215, 0, 0.25); transform: scale(1.04); }
}

@keyframes verifiedBadgePulsePink {
  0% { box-shadow: 0 0 12px rgba(255, 0, 85, 0.25), inset 0 0 8px rgba(255, 0, 85, 0.1); transform: scale(1); }
  100% { box-shadow: 0 0 22px rgba(255, 0, 85, 0.55), inset 0 0 15px rgba(255, 0, 85, 0.25); transform: scale(1.04); }
}

/* Cool Admin Cyber Crown Crest & Surrounding Aura Effect */
/* ULTRA-COOL HIGH-TECH CYBERPUNK ADMIN EMBLEM LOGO */
.cyber-admin-logo-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  margin-bottom: 12px;
  cursor: pointer;
  animation: brandPulseZoom 2.2s ease-in-out infinite alternate;
  will-change: transform;
}

/* Dual Rotating Conic Energy Halos */
.cyber-admin-halo-outer {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #00f2fe, #d600ff, #ffd700, #ff007f, #00f2fe);
  animation: adminHaloRotate 4s linear infinite;
  opacity: 0.85;
  filter: blur(4px);
}

.cyber-admin-halo-inner {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #ffd700, #00f2fe, #d600ff, #ffd700);
  animation: adminHaloRotate 2.5s linear infinite reverse;
  opacity: 0.95;
}

.cyber-admin-halo-inner::after {
  content: '';
  position: absolute;
  inset: 2.5px;
  background: #060210;
  border-radius: 50%;
}

/* 4 Cyber HUD Brackets at corners */
.cyber-logo-bracket {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: #00f2fe;
  border-style: solid;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 0 6px #00f2fe);
  transition: all 0.3s ease;
}
.cyber-logo-bracket.tl { top: -6px; left: -6px; border-width: 2px 0 0 2px; }
.cyber-logo-bracket.tr { top: -6px; right: -6px; border-width: 2px 2px 0 0; }
.cyber-logo-bracket.bl { bottom: -6px; left: -6px; border-width: 0 0 2px 2px; }
.cyber-logo-bracket.br { bottom: -6px; right: -6px; border-width: 0 2px 2px 0; }

.cyber-admin-logo-container:hover .cyber-logo-bracket.tl { transform: translate(-3px, -3px); border-color: #ffd700; }
.cyber-admin-logo-container:hover .cyber-logo-bracket.tr { transform: translate(3px, -3px); border-color: #ffd700; }
.cyber-admin-logo-container:hover .cyber-logo-bracket.bl { transform: translate(-3px, 3px); border-color: #ffd700; }
.cyber-admin-logo-container:hover .cyber-logo-bracket.br { transform: translate(3px, 3px); border-color: #ffd700; }

/* Holographic Laser Beam Sweep */
.cyber-admin-scanbeam {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
.cyber-admin-scanbeam::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 242, 254, 0.4) 80%, rgba(255, 255, 255, 0.8) 100%);
  animation: adminLaserScan 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes adminLaserScan {
  0% { top: -100%; }
  50% { top: 100%; }
  100% { top: 100%; }
}

/* Central Core SVG Logo Container */
.cyber-admin-emblem-core {
  position: relative;
  z-index: 5;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #150a30 0%, #060210 100%);
  border: 1.5px solid rgba(0, 242, 254, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.4), inset 0 0 15px rgba(214, 0, 255, 0.3);
  animation: adminEmblemPulse 2.5s ease-in-out infinite alternate;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}

.cyber-admin-logo-container:hover .cyber-admin-emblem-core {
  transform: scale(1.12);
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.8), 0 0 50px rgba(0, 242, 254, 0.6);
  border-color: #ffd700;
}

.cyber-admin-svg-logo {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
  animation: crownFloat 2s ease-in-out infinite alternate;
}

@keyframes adminHaloRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes adminEmblemPulse {
  0% {
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.4), inset 0 0 10px rgba(214, 0, 255, 0.25);
  }
  100% {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.75), inset 0 0 20px rgba(0, 242, 254, 0.45);
  }
}

@keyframes crownFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-3px); }
}

/* ==========================================
   VIP STORE CONTAINER & SCOPED NEW FEATURES
   ========================================== */
.vip-store-container {
    position: relative;
}

/* 4. Compare Button (Cyan/Tím Cyberpunk Glow) */
.vip-store-container .vip-compare-btn {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(168, 85, 247, 0.2));
    border: 1.5px solid var(--cyan-accent);
    color: #ffffff;
    font-family: var(--font-tech), sans-serif;
    font-weight: 800;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.25);
}

.vip-store-container .vip-compare-btn:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: #ec4899;
    box-shadow: 0 0 22px rgba(236, 72, 153, 0.45);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.35), rgba(236, 72, 153, 0.35));
}

/* Packages Responsive Grid (Desktop: Top row 3 packages 100k-200k-400k, Bottom row 2 VIP 700k-1M prominent) */
.vip-store-container .vip-pkg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 992px) {
    .vip-store-container .vip-pkg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .vip-store-container .vip-pkg-grid {
        grid-template-columns: 1fr;
    }
}

/* Package Card Layout Enhancements */
.vip-store-container .vip-pkg-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    border-radius: 14px;
    background: rgba(16, 7, 34, 0.88);
    border: 1.5px solid rgba(0, 240, 255, 0.35);
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    transition: all 0.3s ease;
}

.vip-store-container .vip-pkg-card.pkg-vip-highlight {
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.2), inset 0 0 15px rgba(255, 215, 0, 0.08);
}

.vip-store-container .pkg-card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.vip-store-container .pkg-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.vip-store-container .pkg-icon-wrap.cyan-bg { background: rgba(6, 182, 212, 0.15); border: 1px solid rgba(6, 182, 212, 0.4); }
.vip-store-container .pkg-icon-wrap.pink-bg { background: rgba(236, 72, 153, 0.15); border: 1px solid rgba(236, 72, 153, 0.4); }
.vip-store-container .pkg-icon-wrap.green-bg { background: rgba(0, 255, 157, 0.15); border: 1px solid rgba(0, 255, 157, 0.4); }
.vip-store-container .pkg-icon-wrap.gold-bg { background: rgba(255, 215, 0, 0.18); border: 1px solid rgba(255, 215, 0, 0.5); }
.vip-store-container .pkg-icon-wrap.purple-bg { background: rgba(168, 85, 247, 0.2); border: 1px solid rgba(168, 85, 247, 0.5); }

.vip-store-container .pkg-card-title {
    font-family: var(--font-heading);
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 4px;
}

.vip-store-container .pkg-card-price {
    font-size: 22px;
    font-weight: 900;
    color: var(--gold-accent);
    margin-bottom: 12px;
    font-family: var(--font-tech);
}

.vip-store-container .pkg-card-price .price-unit {
    font-size: 13px;
}

/* 1. Device Badges (Pill Badges) */
.vip-store-container .vip-device-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.vip-store-container .badge-pill {
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

.vip-store-container .badge-pill.ios { color: #38bdf8; border-color: rgba(56, 189, 248, 0.3); background: rgba(56, 189, 248, 0.1); }
.vip-store-container .badge-pill.android { color: #4ade80; border-color: rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.1); }
.vip-store-container .badge-pill.pc { color: #c084fc; border-color: rgba(192, 132, 252, 0.3); background: rgba(192, 132, 252, 0.1); }

.vip-store-container .badge-sub-text {
    font-size: 10px;
    color: #94a3b8;
    font-style: italic;
    width: 100%;
    margin-top: 2px;
}

/* 2. Social Proof & FOMO Bar */
.vip-store-container .vip-social-proof {
    font-size: 11.5px;
    color: #cbd5e1;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.25);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.vip-store-container .vip-social-proof .star-rating {
    color: #ffd700;
    font-weight: 800;
}

.vip-store-container .vip-social-proof .buy-count {
    color: #38bdf8;
}

.vip-store-container .vip-fomo-bar {
    font-size: 11px;
    font-weight: 800;
    color: #ff4757;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 71, 87, 0.12);
    border: 1.5px solid rgba(255, 71, 87, 0.4);
    padding: 6px 10px;
    border-radius: 6px;
    animation: fomoPulse 2s infinite ease-in-out alternate;
}

.vip-store-container .fomo-pulse-icon {
    font-size: 12px;
    color: #ff4757;
}

@keyframes fomoPulse {
    0% { box-shadow: 0 0 5px rgba(255, 71, 87, 0.2); }
    100% { box-shadow: 0 0 16px rgba(255, 71, 87, 0.6); }
}

/* 3. 3-Step Fast Onboarding Flow */
.vip-store-container .vip-onboarding-flow {
    margin-top: 28px;
    background: linear-gradient(135deg, rgba(14, 8, 36, 0.9), rgba(8, 4, 24, 0.95));
    border: 1.5px solid rgba(6, 182, 212, 0.35);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.vip-store-container .flow-title-row {
    font-family: var(--font-tech), sans-serif;
    font-size: 14.5px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}

.vip-store-container .flow-bolt-icon {
    color: var(--cyan-accent);
    font-size: 18px;
}

.vip-store-container .flow-steps-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

@media (max-width: 768px) {
    .vip-store-container .flow-steps-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .vip-store-container .flow-dashed-connector {
        display: none !important;
    }
}

.vip-store-container .flow-step-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vip-store-container .flow-step-card:hover {
    transform: translateY(-4px);
    border-color: #ec4899;
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

.vip-store-container .step-num {
    position: absolute;
    top: 10px;
    right: 12px;
    font-family: var(--font-tech);
    font-weight: 900;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.12);
}

.vip-store-container .step-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.4);
    color: var(--cyan-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 10px;
}

.vip-store-container .step-heading {
    font-family: var(--font-heading);
    font-size: 13.5px;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 6px;
}

.vip-store-container .step-detail {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}

.vip-store-container .flow-dashed-connector {
    width: 32px;
    height: 2px;
    border-top: 2px dashed rgba(6, 182, 212, 0.6);
    filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.8));
}

/* Modal Popup Matrix Comparison Table */
.vip-compare-modal-content {
    max-width: 820px !important;
    width: 95% !important;
    padding: 26px !important;
    background: rgba(10, 5, 26, 0.96) !important;
    border: 1.5px solid rgba(6, 182, 212, 0.5) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 0 50px rgba(6, 182, 212, 0.35), 0 20px 60px rgba(0, 0, 0, 0.9) !important;
}

.compare-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.compare-modal-title {
    font-family: var(--font-heading);
    font-size: 18px;
    color: #ffffff;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.compare-table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.4);
}

.compare-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    color: #e2e8f0;
    min-width: 680px;
}

.compare-matrix-table th {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(6, 182, 212, 0.25));
    color: #ffffff;
    font-family: var(--font-tech);
    font-size: 13px;
    font-weight: 800;
    padding: 14px 12px;
    text-align: center;
    border-bottom: 1.5px solid rgba(6, 182, 212, 0.4);
}

.compare-matrix-table th:first-child {
    text-align: left;
    padding-left: 16px;
}

.compare-matrix-table td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.compare-matrix-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.025);
}

.compare-matrix-table tbody tr:hover {
    background: rgba(6, 182, 212, 0.08);
}

.compare-matrix-table .feature-label {
    text-align: left;
    font-weight: 700;
    color: #ffffff;
    padding-left: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.compare-matrix-table .check-yes {
    color: #00ff9d;
    font-weight: 700;
}

.compare-matrix-table .check-no {
    color: #64748b;
}

.compare-matrix-table .text-gold {
    color: #ffd700;
    font-weight: 700;
}

.compare-matrix-table .text-vip {
    color: #c084fc;
    font-weight: 800;
}

.compare-matrix-table .col-highlight {
    background: rgba(255, 215, 0, 0.08);
}

.compare-matrix-table .col-vip {
    background: rgba(168, 85, 247, 0.12);
}

.compare-matrix-table .badge-top {
    display: inline-block;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #ff0055;
    color: #fff;
    margin-left: 4px;
    vertical-align: middle;
}

.compare-matrix-table .badge-top.gold {
    background: #ffd700;
    color: #000;
}





/* DPI Result Section 4 Button & Card Animation Enhancements */
.btn-download-dpi-inline-trigger {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-download-dpi-inline-trigger::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: rotate(30deg) translateX(-100%);
    transition: transform 0.6s ease;
}

.btn-download-dpi-inline-trigger:hover::after {
    transform: rotate(30deg) translateX(100%);
}

.btn-download-dpi-inline-trigger:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.5) !important;
}

.dpi-clean-spec > div {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.dpi-clean-spec > div:hover {
    border-color: rgba(0, 240, 255, 0.3) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}


@keyframes luxGoldPulse {
    0% {
        box-shadow: 0 4px 20px rgba(255, 215, 0, 0.15);
        border-color: rgba(255, 215, 0, 0.35);
    }
    100% {
        box-shadow: 0 8px 30px rgba(255, 215, 0, 0.35);
        border-color: rgba(255, 215, 0, 0.7);
    }
}

/* Toast notification container & items (Top Centered with Safe-Area Support) */
.cyber-toast-container {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    width: calc(100% - 32px);
    max-width: 380px;
}

.cyber-toast-item {
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(12, 22, 38, 0.92), rgba(6, 45, 38, 0.90));
    border: 1px solid rgba(0, 255, 157, 0.55);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Rajdhani', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 8px 25px rgba(0, 255, 157, 0.25), 0 4px 15px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    animation: toastPopInTop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: all 0.3s ease;
    word-break: break-word;
    line-height: 1.45;
}

.cyber-toast-item.toast-error {
    background: linear-gradient(135deg, rgba(35, 12, 22, 0.92), rgba(60, 12, 28, 0.90));
    border-color: rgba(255, 71, 87, 0.6);
    box-shadow: 0 8px 25px rgba(255, 71, 87, 0.28), 0 4px 15px rgba(0, 0, 0, 0.6);
}

.cyber-toast-item.toast-exit {
    opacity: 0;
    transform: translateY(-25px) scale(0.9);
    margin-top: -45px;
    pointer-events: none;
}

@keyframes toastPopInTop {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Verified Tag Styling Fix */
.sensi-glass-card .cyber-tag.verified-tag,
.verified-tag {
  background: rgba(0, 255, 157, 0.12) !important;
  border: 1px solid rgba(0, 255, 157, 0.5) !important;
  color: #00ff9d !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(0, 255, 157, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

/* Independent Warranty Policy Modal Popup */
.warranty-modal-overlay {
  z-index: 100000;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.warranty-modal-overlay.active {
  display: flex !important;
}

.warranty-modal-card {
  width: 90%;
  max-width: 420px;
  max-height: 80vh;
  background: #0d0714;
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 16px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
  position: relative;
  animation: warrantyModalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes warrantyModalPop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.warranty-modal-header {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--gold-accent, #ffd700);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 36px;
  line-height: 1.4;
}

.warranty-modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  margin-top: 12px;
  padding-right: 4px;
  font-size: 12.5px;
  color: #e2e8f0;
  line-height: 1.6;
  font-family: var(--font-tech), sans-serif;
}

.warranty-modal-body::-webkit-scrollbar {
  width: 4px;
}
.warranty-modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
.warranty-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.4);
  border-radius: 4px;
}

.warranty-modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  outline: none;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 0;
}

.warranty-modal-close:hover {
  background: rgba(255, 0, 85, 0.25);
  border-color: rgba(255, 0, 85, 0.5);
  color: #ff4757;
  transform: scale(1.08);
}

/* ==========================================
   NATIVE APP TOUCH & PERFORMANCE OPTIMIZATIONS
   ========================================== */

/* 1. Prevent rubber-banding on iOS, disable blue tap highlight, & prevent accidental text selection */
html, body {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Ensure input fields allow text entry, selection, and copy-paste */
input,
textarea,
[contenteditable="true"],
.cyber-input,
.sensi-number-input {
  -webkit-user-select: auto !important;
  user-select: auto !important;
}

/* 2. GPU Hardware Acceleration for Range Sliders & Handles */
input[type="range"],
.cyber-slider,
.cyber-slider::-webkit-slider-thumb,
.cyber-slider::-moz-range-thumb,
.cyber-slider::-webkit-slider-runnable-track,
.cyber-slider::-moz-range-track {
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 3. Font Display Swap Optimization */
@font-face {
  font-display: swap;
}