@media (min-width: 992px) {
            .top-bar {
                background: #151515;
                height: 40px;
                padding: 0;
                border-bottom: 1px solid #333; /* Subtle separator */
                font-family: Tahoma, Geneva, sans-serif;
            }

            .top_nav {
                width: 100%;
                height: 100%;
                background: #151515;
            }

            .top_menu_container {
                max-width: 1480px; 
                margin: 0 auto;
                height: 100%;
                padding: 0;
            }

            /* Logo */
            .top_nav h1 {
                float: left;
                width: 57px;
                height: 15px;
                background: url('https://gunboundlegacy.com/assets/img/top_snLogo1.png') no-repeat center left;
                background-size: contain;
                margin: 13px 20px 0 0; 
                padding: 0;
            }
            .top_nav h1 a { display: block; width: 100%; height: 100%; }

            /* Main Menu (Legacy Float Layout) */
            .top_main_menu {
                display: block !important;
                list-style: none;
                padding: 0;
                margin: 0;
                height: 40px;
            }
            .top_main_menu::after {
                content: "";
                display: block;
                clear: both;
            }

            /* Items */
            .top_main_menu > li {
                float: left;
                height: 40px;
                display: block;
                position: relative;
            }

            .top_main_menu > li > a {
                display: block;
                
                line-height: 40px;
                color: #888;
                text-decoration: none;
                font-size: 11px;
                font-weight: bold;
                text-transform: uppercase;
                transition: color 0.2s;
            }

            .top_main_menu > li > a:hover { color: #fff; }
            
            /* Highlight Green Item */
            .top_main_menu > li > a.highlight { color: #a3d500; }

            /* Triangles */
            .triangle, .triangle2 {
                display: inline-block;
                width: 0; height: 0;
                vertical-align: middle;
                border-top: 4px solid;
                border-right: 4px solid transparent;
                border-left: 4px solid transparent;
                margin-left: 5px;
                margin-bottom: 2px;
            }
            .triangle { border-top-color: #888; }
            .triangle2 { border-top-color: #a3d500; }

            /* Right Menu (Float Right) */
            .top_main_menu > li.top_right_menu {
                float: right;
                margin-left: 0;
            }

            .top_right_menu > ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: block;
            }
            .top_right_menu > ul::after { content: ""; display: block; clear: both; }

            .top_right_menu > ul > li {
                float: left;
                position: relative;
            }

            .top_right_menu > ul > li > a {
                color: #fff;
                padding: 0 10px;
                line-height: 40px;
                font-size: 11px;
                font-weight: bold;
                text-transform: uppercase;
                text-decoration: none;
                display: block;
            }

            .top_right_menu > ul > li > a:hover { color: #f15d1e; }

            .facebook_icon {
                background: url('https://gunboundlegacy.com/assets/img/icons/fb_icon.jpg') no-repeat left center;
                background-size: 14px;
                padding-left: 18px;
            }

            /* Submenus */
            .top_sub_menu {
                display: none;
                position: absolute;
                top: 40px;
                left: 0;
                background: #151515;
                min-width: 100%; /* Ensure it's at least as wide as the parent */
                z-index: 1000;
                border-radius: 0 0 5px 5px;
                padding: 0 0 4px 0;
                box-shadow: 0 4px 5px rgba(0,0,0,0.5);
                opacity: 0.9;
                margin-left: 0; /* Aligned flush with parent */
                border-bottom: none;
            }

            .top_main_menu > li:hover .top_sub_menu { display: block; }

            .top_sub_menu li { 
                display: block; 
                width: 100%; 
                white-space: nowrap; /* Prevent wrapping */
            }
            
            .top_sub_menu li a {
                display: block;
                padding: 6px 12px; /* Match legacy padding */
                color: #aaa;
                font-size: 11px; /* Match font size */
                line-height: 26px; /* Match legacy line-height */
                font-weight: normal;
                text-transform: none;
                text-decoration: none;
                margin: 0;
                background: none;
            }

            .top_sub_menu li a:hover { color: #fff; background: #333; }

            /* --- BANNER MENU DESKTOP --- */
            .gb-gnb {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 100;
                padding-top: 40px;
                background: none;
                overflow: visible;
                height: 80px;
                transition: all 0.5s ease;
            }
            .gb-gnb:hover {
                padding-top: 40px;
                height: 280px !important;
                background: rgba(0, 0, 0, 0.85);
                border-bottom: 2px solid #e65100;
            }
            .gb-gnb:hover ul ul { opacity: 1; visibility: visible; }
            
            .gb-gnb-container { max-width: 1000px; margin: 0 auto; position: relative; height: 100%; }
            .gb-gnb h1 {
                position: absolute; top: 0px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 100;
                width: 650px; height: 280px; background: url('../assets/img/logo_white.png') no-repeat center center; background-size: contain;
                pointer-events: none;
            }
            .gb-gnb h1 > a { display: block; width: 100%; height: 100%; pointer-events: auto; }
            
            .gb-gnb ul { list-style: none; padding: 0; margin: 0; position: relative; z-index: 1001; }
            .gb-gnb-left { float: left; padding-left: 0 !important; }
            .gb-gnb-right { float: right; padding-right: 0 !important; }
            
            .gb-gnb > div > ul > li { float: left; margin: 0 10px; position: relative; text-align: center; }
            .gb-gnb > div > ul > li > a {
                font-family: Titillium Web,Verdana, Geneva, sans-serif; font-size: 1.3rem; font-weight: 600; color: #fff;
                text-transform: uppercase; text-decoration: none; text-shadow: 0 2px 4px rgba(0,0,0,0.9);
                display: block; padding: 10px 15px; transition: color 0.3s;
            }
            .gb-gnb > div > ul > li > a:hover { color: #ffca28; text-shadow: 0 0 10px #ffca28; }
            
            .gb-gnb ul ul {
                position: absolute; top: 50px; left: 0; width: 100%; opacity: 0; visibility: hidden;
                transition: opacity 0.3s ease 0.1s;
            }
            .gb-gnb ul ul li { float: none; display: block; margin: 8px 0; }
            .gb-gnb ul ul li a {
                font-size: 0.9rem; color: #b0bec5; text-decoration: none; font-weight: 500;
                display: block; transition: all 0.2s; text-transform: capitalize;
            }
            .gb-gnb ul ul li a:hover { color: #fff; transform: scale(1.1); font-weight: 700; }
            
            .gb-gnb::after { content: ""; display: block; clear: both; }
            
            .gb-mobile-toggle-btn, .gb-mobile-menu-container, .mobile-logo-container, .top_nav_mobile { display: none; }
        }

        /* --- MOBILE MENU --- */
        @media (max-width: 991px) {
            .gb-gnb { display: none; }
            .top_nav { display: none !important; }

            /* Top Bar Mobile */
            .top-bar { background: #151515 !important; min-height: 38px; padding: 0 !important; border-bottom: none !important; }
            .top_nav_mobile { width: 100%; padding-top: 10px; min-height: 38px; background: #151515; position: relative; z-index: 999; }
            .top_nav_mobile * { font-family: Tahoma, Geneva, sans-serif !important; }
            .top_nav_mobile h1 { width: 103px; height: 27px; background: url('https://gunboundlegacy.com/assets/img/top_snLogo1.png') no-repeat; background-size: contain; margin: 0 0 0 10px; }
            .top_nav_mobile h1 a { width: 100%; height: 100%; display: block; }
            .gnb_mobile_btn { width: 40px; height: 30px; position: absolute; background: none; border: 0; cursor: pointer; top: 10px; right: 10px; padding: 0; }
            .gnb_mobile_btn > i { position: absolute; left: 4px; top: 4px; border-top: 12px double #fff; border-bottom: 4px solid #fff; width: 28px; height: 4px; }

            /* Expanded Top Main Menu */
            .top_main_menu { display: none; margin: 20px 0 0 0; z-index: 999; list-style: none; padding: 0; background: #202020; }
            .top_main_menu.open { display: block; }
            .top_main_menu > li > a { display: block; padding: 12px 20px; padding-left: 20px; font-weight: bold; color: #FFF; text-decoration: none; text-transform: uppercase; background: #202020; border-bottom: #000 solid 1px; font-size: 12px; }
            .top_main_menu > li > a:hover { color: #f15d1e; }
            .top_sub_menu { background: #333; border-bottom: #000 solid 1px; padding-left: 10px; z-index: 999; list-style: none; margin: 0; padding: 5px 0 5px 10px; }
            .top_sub_menu li { display: inline-block; zoom: 1; position: relative; z-index: 999; vertical-align: top; }
            .top_sub_menu li a { display: block; padding: 7px 16px; background: #333; margin: 0; color: #aaa; text-decoration: none; line-height: 26px; border: none; font-weight: normal; }
            .top_sub_menu li a:hover { color: #FFF; }

            /* Banner & Menu Mobile */
            .header-banner { position: relative; min-height: 150px; }
            .gb-mobile-toggle-btn { 
                position: absolute; 
                top: 20px; 
                right: 10px; 
                background: #ddd; 
                color: #333; 
                font-weight: bold; 
                font-size: 0.8rem; 
                padding: 5px 10px; 
                border-radius: 3px; 
                border: none; 
                z-index: 1002; /* Keep button above menu */
                box-shadow: 0 2px 5px rgba(0,0,0,0.5); 
                cursor: pointer; 
                display: block; 
                font-family: Tahoma, sans-serif; 
            }
            .gb-mobile-toggle-btn:hover { background: #fff; }
            
            .gb-mobile-menu-container { 
                position: relative; /* Revert to relative so it pushes content */
                width: 100%;
                background: #202020; 
                overflow: hidden; 
                max-height: 0; 
                transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
                border-top: 0; 
                z-index: 999; 
            }
            .gb-mobile-menu-container.open { max-height: 2000px; border-top: 2px solid #f15d1e; }
            .gb-mobile-list { list-style: none; padding: 0; margin: 0; }
            .gb-mobile-item > a { display: block; background: #433165; color: #fff; font-weight: 600; text-transform: uppercase; padding: 10px 15px; padding-left: 15px; text-decoration: none; font-size: 1.2rem; border-bottom: 1px solid #000; text-align: left; cursor: default; }
            .gb-mobile-submenu { display: block; background: #333; padding: 10px 10px; list-style: none; margin: 0; border-bottom: 1px solid #000; }
            .gb-mobile-submenu::after { content: ""; display: block; clear: both; }
            .gb-mobile-submenu li { float: left; font-size: 0.8em; padding: 5px 15px; margin: 0; }
            .gb-mobile-submenu li a { color: #ccc; text-decoration: none; word-break: break-all; white-space: nowrap; display: block; font-family: Titillium Web, Verdana, Geneva, sans-serif; }
            .gb-mobile-submenu li a:hover { color: #fff; }
            .mobile-logo-container { display: block; text-align: center; padding: 10px 0; }
            .mobile-logo { max-height: 100px; }
        }

        /* Sidebar Login Modern Hybrid */
        .sidebar-login-wrapper {
            background: #ffffff;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            border: 1px solid #e0e0e0;
            font-family: 'Titillium Web', sans-serif;
            position: relative;
            overflow: hidden;
        }
        
        /* Accent line top */
        .sidebar-login-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #f15d1e, #ff9100);
        }
        
        .sidebar-login-title {
            font-size: 15px;
            font-weight: 700;
            color: #37474f;
            margin-bottom: 15px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .sidebar-login-container {
            display: flex;
            gap: 10px;
            align-items: stretch; /* Ensure equal height */
        }
        
        .sidebar-inputs {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .sidebar-login-input {
            background: #fbfbfb;
            border: 1px solid #e0e0e0;
            font-size: 12px;
            padding: 10px 12px;
            border-radius: 6px;
            width: 100%;
            color: #333;
            transition: all 0.2s ease;
            font-weight: 600;
        }
        
        .sidebar-login-input::placeholder { color: #90a4ae; font-weight: normal; }
        
        .sidebar-login-input:focus {
            background: #fff;
            border-color: #f15d1e;
            box-shadow: 0 0 0 3px rgba(241, 93, 30, 0.1);
            outline: none;
        }
        
        .sidebar-btn-container {
            width: 75px;
            display: flex;
        }

        .sidebar-login-btn {
            width: 100%;
            height: 100%; /* Fill container height */
            background: linear-gradient(135deg, #263238 0%, #212121 100%);
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 800;
            font-size: 16px;
            text-transform: uppercase;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }
        
        .sidebar-login-btn:hover {
            background: linear-gradient(135deg, #f15d1e 0%, #e64a19 100%);
            transform: translateY(-1px);
            box-shadow: 0 6px 15px rgba(241, 93, 30, 0.3);
        }
        
        .sidebar-login-links {
            margin-top: 15px;
            display: flex;
            justify-content: center;
            gap: 15px;
            font-size: 11px;
        }
        
        .sidebar-login-links a {
            color: #78909c;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .sidebar-login-links a:hover { color: #f15d1e; }
        
        /* Mini Account Panel Styles */
        .sidebar-account-wrapper {
            background: #ffffff;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            border: 1px solid #e0e0e0;
            font-family: 'Titillium Web', sans-serif;
            position: relative;
            overflow: hidden;
        }
        
        .sidebar-account-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #1976d2, #42a5f5);
        }
        
        .sidebar-account-header {
            font-size: 14px;
            font-weight: 700;
            color: #37474f;
            margin-bottom: 12px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .sidebar-account-header a {
            color: #78909c;
            transition: color 0.2s;
        }
        
        .sidebar-account-header a:hover {
            color: #1976d2;
        }
        
        .sidebar-account-body {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .sidebar-avatar-preview {
            background: #f5f5f5;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }
        
        .sidebar-user-info {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .sidebar-user-name {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #37474f;
            font-weight: 600;
        }
        
        .sidebar-user-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 6px;
            font-size: 11px;
        }
        
        .stat-item {
            background: #f5f5f5;
            padding: 4px 6px;
            border-radius: 4px;
            text-align: center;
            border: 1px solid #e0e0e0;
        }
        
        .stat-label {
            display: block;
            color: #78909c;
            font-weight: 600;
            font-size: 9px;
            text-transform: uppercase;
            margin-bottom: 2px;
        }
        
        .stat-value {
            display: block;
            color: #37474f;
            font-weight: 700;
            font-size: 11px;
        }
        
        .sidebar-account-footer {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #e0e0e0;
        }
        
        .sidebar-account-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            color: #1976d2;
            text-decoration: none;
            font-size: 12px;
            font-weight: 600;
            padding: 6px;
            border-radius: 4px;
            transition: all 0.2s;
            background: #e3f2fd;
        }
        
        .sidebar-account-link:hover {
            background: #1976d2;
            color: #fff;
            transform: translateY(-1px);
        }
        
        /* ============================================
           CAMBIOS SIGNIFICATIVOS DE DISEÑO
           Manteniendo la esencia de la web
           ============================================ */
        
        .main-container-wrapper {
            
        }
        
      /*  .main-container-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #ff9800 0%, #f15d1e 30%, #ff6b35 60%, #f15d1e 100%);
            border-radius: 10px 10px 0 0;
            box-shadow: 0 1px 4px rgba(255, 152, 0, 0.3);
        }
        
        .*/
        .__screenshot-lock-scroll::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 50%;
            height: 2px;
           
            border-radius: 1px;
        }
        
        /* Cambios significativos a los paneles de contenido */
        .content-panel {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid #e3f2fd;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            background: #ffffff;
            
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
        }
        
        .content-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1;
        }
        
        .content-panel:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(255, 152, 0, 0.12);
           
        }
        
        .content-panel:hover::before {
            opacity: 1;
        }
        
        /* Cambios significativos al header de los paneles */
        .panel-header {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            padding: 10px 15px !important;
            font-size: 0.8rem !important;
            background: linear-gradient(135deg, #263238 0%, #37474f 100%) !important;
            border-bottom: 1px solid #ff9800;
        }
        
        .panel-header i {
            font-size: 1rem !important;
            margin-right: 8px !important;
            color: #ff9800 !important;
        }
        
        .panel-header::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 152, 0, 0.2), transparent);
            transition: left 0.6s ease;
        }
        
        .content-panel:hover .panel-header::after {
            left: 100%;
        }
        
        .content-panel:hover .panel-header {
            background: linear-gradient(135deg, #1a252f 0%, #263238 100%) !important;
            border-bottom-color: #ff6b35;
        }
        
        /* Cambios significativos al body de los paneles */
        .panel-body {
            transition: all 0.3s ease;
            padding: 15px !important;
            background: #fafbfc;
        }
        
        .content-panel:hover .panel-body {
            background: #ffffff;
        }
        
        /* Cambios significativos al botón de descarga */
        .download-btn-orange {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            border-radius: 8px !important;
            height: 70px !important;
            border: 2px solid rgba(255, 255, 255, 0.25) !important;
        }
        
        .download-btn-orange::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }
        
        .download-btn-orange:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 0 #bf360c, 0 12px 25px rgba(0, 0, 0, 0.4);
            filter: brightness(1.05);
            border-color: rgba(255, 255, 255, 0.4) !important;
        }
        
        .download-btn-orange:hover::after {
            width: 300px;
            height: 300px;
        }
        
        .download-btn-orange:active {
            transform: translateY(-1px);
            box-shadow: 0 4px 0 #bf360c, 0 6px 15px rgba(0, 0, 0, 0.3);
        }
        
        .dl-text-main {
            font-size: 32px !important;
            letter-spacing: 2px !important;
        }
        
        .dl-text-sub {
            font-size: 10px !important;
            letter-spacing: 2px !important;
        }
        
        /* Mejoras al sidebar container */
        .modern-sidebar {
            background: transparent;
        }
        
        /* Mejoras a los elementos de lista en paneles */
        .notice-item {
            transition: all 0.2s ease;
            border-left: 3px solid transparent;
        }
        
        .notice-item:hover {
            background: linear-gradient(to right, #fff3e0 0%, #ffffff 100%);
            border-left-color: #ff9800;
            padding-left: 12px;
            transform: translateX(3px);
        }
        
        /* Mejoras a las secciones del inicio */
        .row > section {
            transition: all 0.3s ease;
        }
        
        /* Mejoras a los avatares en cards */
        .avatar-card {
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.08);
        }
        
        .avatar-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            border-color: rgba(255, 152, 0, 0.3);
        }
        
        /* Mejoras al banner de comunidad */
        .community-banner {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .community-banner:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 200, 83, 0.3);
            border-color: rgba(0, 200, 83, 0.5);
        }
        
        /* Mejoras adicionales al sidebar login y account */
        .sidebar-login-wrapper,
        .sidebar-account-wrapper {
            transition: all 0.3s ease;
            border-radius: 12px;
        }
        
        .sidebar-login-wrapper:hover,
        .sidebar-account-wrapper:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
        }
        
        .sidebar-login-btn {
            transition: all 0.3s ease !important;
            position: relative;
            overflow: hidden;
        }
        
        .sidebar-login-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }
        
        .sidebar-login-btn:hover::before {
            width: 300px;
            height: 300px;
        }
        
        .sidebar-login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(38, 50, 56, 0.4) !important;
        }
        
        /* Mejoras a los inputs del sidebar */
        .sidebar-login-input {
            transition: all 0.3s ease !important;
        }
        
        .sidebar-login-input:focus {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(241, 93, 30, 0.2) !important;
        }
        
        /* Mejoras a los stats del usuario */
        .stat-item {
            transition: all 0.2s ease;
        }
        
        .stat-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background: #e8f5e9 !important;
        }
        
        /* Mejoras significativas a la sección de ranking */
        .ranking-preview-sidebar {
            background: #ffffff !important;
            border-radius: 10px !important;
            overflow: hidden !important;
            margin-bottom: 20px !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
            border: 1px solid #e3f2fd !important;
            transition: all 0.3s ease !important;
        }
        
        .ranking-preview-sidebar:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.1) !important;
            border-color: #ff9800 !important;
        }
        
        .ranking-preview-header {
            background: linear-gradient(135deg, #263238 0%, #37474f 100%) !important;
            color: #fff !important;
            padding: 10px 15px !important;
            font-size: 0.8rem !important;
            font-weight: 700 !important;
            border-bottom: 2px solid #ff9800 !important;
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
            position: relative;
            overflow: hidden;
        }
        
        .ranking-preview-header::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 152, 0, 0.2), transparent);
            transition: left 0.5s ease;
        }
        
        .ranking-preview-sidebar:hover .ranking-preview-header::after {
            left: 100%;
        }
        
        .ranking-preview-header i {
            color: #ff9800 !important;
            font-size: 1.1rem !important;
        }
        
        .ranking-preview-list {
            list-style: none !important;
            padding: 10px !important;
            margin: 0 !important;
            font-size: 0.85rem !important;
            background: #fafbfc !important;
        }
        
        .ranking-preview-list li {
            display: flex !important;
            align-items: center !important;
            padding: 8px 8px !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
            color: #37474f !important;
            transition: all 0.2s ease !important;
            border-radius: 6px !important;
            
            background: #ffffff !important;
        }
        
        .ranking-preview-list li:hover {
            background: linear-gradient(to right, #fff3e0 0%, #ffffff 100%) !important;
            transform: translateX(4px);
            box-shadow: 0 2px 8px rgba(255, 152, 0, 0.15) !important;
            border-left: 3px solid #ff9800 !important;
            padding-left: 12px !important;
        }
        
        .ranking-preview-list li:last-child {
            border-bottom: none !important;
            margin-bottom: 0 !important;
        }
        
        .rank-position {
            width: 26px !important;
            height: 26px !important;
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
            color: #1976d2 !important;
            margin-right: 10px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 6px !important;
            font-size: 0.75rem !important;
            font-weight: 700 !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
            border: 1px solid rgba(25, 118, 210, 0.2) !important;
            transition: all 0.2s ease !important;
        }
        
        .ranking-preview-list li:hover .rank-position {
            transform: scale(1.1);
        }
        
        .rank-position.rank-1 {
            background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%) !important;
            color: #fff !important;
            box-shadow: 0 3px 8px rgba(255, 215, 0, 0.4) !important;
            border: 1px solid rgba(255, 215, 0, 0.3) !important;
        }
        
        .rank-position.rank-2 {
            background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%) !important;
            color: #fff !important;
            box-shadow: 0 3px 8px rgba(189, 189, 189, 0.3) !important;
            border: 1px solid rgba(189, 189, 189, 0.3) !important;
        }
        
        .rank-position.rank-3 {
            background: linear-gradient(135deg, #ffcc80 0%, #ff9800 100%) !important;
            color: #fff !important;
            box-shadow: 0 3px 8px rgba(255, 152, 0, 0.3) !important;
            border: 1px solid rgba(255, 152, 0, 0.3) !important;
        }
        
        .rank-icon-small {
            width: 20px !important;
            height: 20px !important;
            margin-right: 10px !important;
            border-radius: 4px !important;
            transition: transform 0.2s ease !important;
        }
        
        .ranking-preview-list li:hover .rank-icon-small {
            transform: scale(1.15);
        }
        
        .rank-name {
            flex: 1 !important;
            font-weight: 600 !important;
            color: #263238 !important;
            font-size: 0.85rem !important;
            transition: color 0.2s ease !important;
        }
        
        .ranking-preview-list li:hover .rank-name {
            color: #ff9800 !important;
            font-weight: 700 !important;
        }
        
        .rank-gp {
            color: #546e7a !important;
            font-size: 0.8rem !important;
            font-weight: 600 !important;
            margin-left: auto !important;
            transition: color 0.2s ease !important;
        }
        
        .ranking-preview-list li:hover .rank-gp {
            color: #37474f !important;
            font-weight: 700 !important;
        }
        
        /* Mejoras responsive */
        @media (max-width: 991px) {
            .main-container-wrapper {
                padding: 20px 15px 30px;
                border-radius: 8px;
                margin-top: 15px;
            }
            
            .content-panel:hover {
                transform: translateY(-2px);
            }
            
            .ranking-preview-sidebar:hover {
                transform: translateY(-2px);
            }
        }
    
#screenShotContainer{cursor:crosshair;left:0;position:absolute;top:0}#toolPanel{background:#fff;border-radius:6px;box-sizing:content-box;height:24px;left:0;min-width:392px;padding:6px 14px;position:absolute;top:0;z-index:9999}#toolPanel .item-panel{float:left;height:24px;margin-right:15px;width:24px}#toolPanel .item-panel:last-child{margin-right:0}#toolPanel .square{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHfSURBVHgB7ZpNboJAFMffY2hK/EhYWl3U3sSeQG/gEeoNxBvYI/QGeoLak9SVdSeNxlKFeR2atPEjDGiaCNP3S1jAvCHzG4ZhwR+AYRiGyS8I5+DUmnBpnMAH3/fhRLILO7WWEFZXdekAkAu5AJUwjaJIDiCYTzP1yFJklep9RPAgxxCBJ9ezQVqdSCsogmyMGmMLr6pA2+WLtk7XGL+rahm/QoFAlPfhaj5Jard1nZVs//iG9GiHNIQLEwnhElJHLeW9MRLF+wxM4BxEubEQ5Tr9HHal7kHOsCuN4e4Y1bHQ1VuJLW7TPdyNw8/tCHJGGEaHq80F5+Y2qT5ZOAiOPz3C1s5eEbDgn8HCpsPCpsPCpsPCpsPCpsPCpsPCpsPCpsPCpsPCpsPCpsPCpsPCpsPCpsPCplN8YSGO/2M7H+9J5Zof4nHuCfeCX7aAHuQMi6h9cEkbWNOGWojkGBG7v+eAPatU9+V2O1Yze3IK7q+xhHhAoMOHoI1laGNLdqXWIrKeoUBEkbzTpfK0wTS5WU3FdTWelBYUAEQYyPWb9gmnJvHkZjkpgnQsG65mXmodZOU7lYeeeo/bGEeDcgCpDUqNZYQon3Tpu13Oiw+7rusEzsWlg4wJWoZhGKYofAHzGYh5VvrALQAAAABJRU5ErkJggg==");background-size:cover}#toolPanel .square-active,#toolPanel .square:active,#toolPanel .square:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGzSURBVHgB7ZpBSsNAFIb/GYq6zA3Um+gJ9Abisoi0nqDJCVSKdCOIN2hPYI/gDfQGVtyUQjO+qRaaNDOZFqGT5/sWhWTmlfmGycsiPyAIgiDEi8I2DMwRds0UE9yoCTYkXLhvTtDCBeY4p6oEMWBIWmGIGTKSfw8pCRN+MD36TREzmtbXVlndtHrhJsguCZD2C9/Ss7qHNzSJHKe4VmPXcMtXS7K9irv3tJN32DU59ZGc+okurVFTnwHGrjK/MOgPi2S4Uini4ZWaaUKSnZV7ds2XrgLtGqDjbDtxuRsPERuttdOW4NEcuqa7hQ8qXj37+EDD0fhniDB3RJg7IswdEeaOCHNHhLkjwtwRYe6IMHdEmDsizB0R5o4Ic0eEuSPC3Gm+cF7xHfsLn67pbuH2IvdUDH7N0EV8nJWuvYE1f8bDYAS1CIksr7sYmAnt6oi2auMU3J9j0FmsqYg3luGPLdn0ncYLmoTG8e/pdAz7sHmnHLXptojIfLKWsOhh36Rreaj4CIpUhYdLbYJ2jpQqbJOII1z601SHdAqffem7VbaLDz+ZBNMIpNthCVpBEAShKXwDKrBaATx5xUUAAAAASUVORK5CYII=")}#toolPanel .round{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVoSURBVHgB7Zq9UiNHEMd7ZiWBETbrq3IVB8neG4jM2UHmzFzo6LgnAEcOBU9geIITkS9DhI4QT2De4NaBT1Q5sKhDcMdqpt2zaxntaPZL2pWWK/0iGM3s6q/u+epugAULFix4QjCYBdXvGlCzGhy5wxmuITA7eDn2JLIbCXgF3sAF7+8rKJhiBNu2zT9/tcc4/AjAGwBopx+MHRpzKoTowKdrF3ImX8HL69uWxZr02G3IA8S2kHhCwjuQE/kIzlvoGNgRAt/kYfHpBCvX9epNmosHSV0R0WUMXHql+9gINjC0aU436Iskuj2953jQ7/4MUzC54OV1x+L8gp7gmD5GgB49vA0gL0X1Uxt6vV7i8yzYDryEvY7p6Qohdya19mSCfRe2zkyLkRLKGZwMKnfHiSKjn++LR2RNxphj6NFjTL4a3Gaf25kFW/VN+vWxZXwYg6OphBqorG4cIkLT/KncE/3rU8hANsG+ZcmNNRDQlcBfQf+vYvZRsjjn7MJkbbL0ThZL87QdAzdTbqyDp7J6v1WYWAXNV1lb2qJftj32duRn6rtBSlJb2FrZeD++QOGp6Hf3YIZY9ectw6LmiurdVpqpZEEKeH3zV5qfP4Qa6dcWd92fYMagd9vmtdUXJLox0mxbsrIsvdvfk8YnW9h3Zf4+9FI1Z5Ub57g4ZcJ2bP7w+Q99TqeZz4lzmE5Qb/U2KXBnbmIVPbdnMVokNdQ2ljQ0XjCtyvpxUW09RRzqs+LRIknb1VG4lW1XVtV3jiZWMJ2k9kf/V648uP1wCCVB1mrHJDLkaUlWjhaslnoGu6NNdJY9gjJBrk1n9JNwI3kknfGjhkQKpj13W28TAjpQMkxWVnfxqP4xLi31va5Vhrk7hm9leT7aFAQezMQI1u+28hJKCmO8o7U0ovqaBdc3xwaU0Z2HiGpVP3LafhzNgFGwxaWjNfVK6c5DfLdWwYVHrFotvWAUuktg4dHEaWEM3dH/afV2TP14xOjwso5wAyWHLPxnqIGZI6VmwSjDnRn7B54YDNiaqT39ffgLIcKl+fwuBhOiW5SOwcZpGOHSqAk2LwClQp+zyIxGMwqme6artThQenhoZ2EwMO4sRsECQO/sxB3I544f0wpbWHjhbWqI2aX9gFzYJSyvvgslxXTRicpExl0etAH4EkqL/t1UBtJMpGCUcK417ZbSrYMQ7V64ESOD85GC5dJSS2uiwNnKAZSMrPf2aJemA7nuGhTP2i+dlRGb2v/ncRed2JMWHcj1kE6prMxXNpp6coBxPI4bkxiXpkj/hR4M4OBtef3i6zFiMcTL/cR5v7sTNyzxLG2wMkions3Vtendfm5aw68SSCAx1SIfbl1r6Ztv6c/vR1/JZXUdvY/nMAcs/uw38s3R76MMcyLvrt8ljU2XTItIbRAt0f+Q+KvmCa9vvGXaNuSnfvrdF6nGp+mkVmwpKb0CYwfyPWvl+WzcW9WTGMVCz0/9pCRTQlylMSgfe2H4aKq6i0QoqGghnpnqSbImxFOlS4eo+cxrdQqlMP1cbVOG/oBVv6Z05sf8wrnKqvzZL5zBOxI75kUc2JtBv9vO8siJiloCS5uLWgiXHns0VSWdEvqwsk9rxkF04cyMilr+J6buYoQWveIylXi1DnjLuxbwl4EHmYNw/gKl5uxMy5ZGqKxuHlNIdD+5p1rw6AaGFONmo4sfOhRxdBJ+uOAJtPUMKveH0+Sm8yo9dILEeXGlh+oANIkL6+Qj+D/8uS0pp6ylWScnP6FDiikffiwjfJ3F6kG5Il6pu7hcum8VUVYxkwLxKu2jkvJVKoXDg2LSteDleCMpukh7qcvBuvKKrPVasGDBgqfIvzowNmTgJi8YAAAAAElFTkSuQmCC");background-size:cover}#toolPanel .round-active,#toolPanel .round:active,#toolPanel .round:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASrSURBVHgB7VrrUdtAEN6TB5Pn4BKUDuwKAhUEKsD8jJMMUAFQgfEQw8+YCoAKgAqgA5QKYn4SYl1272Kw7qGHJVlHRt+Mx/b5LN2n3dvbF0CNGjVqvCAwWASGvA0TaOPdfGjACr63xDiHMY7f46db8CCAL+wWSkY5hPu8BUvQRRKfIBREW6n/y+AKH8Qp/Mb3XRZAwSiW8BFfRQnu4YJXoQgwOEcNGMA3dgUFoRjCRRNVQVJ/gK0iJJ6PMKnusiC6k2J2gPMCvGMwM9bCsRaOtcXnJDA4hB7bhRyYn3Cf+9CES/zkW2aM8UUqeQ3v8X2LjWOvd4LXC1FDSEsYbMbMDHB/r80r7fkIkwozOLMYozEufADvUBpJJG2YkmdCe3zLPTbm2dvZCR/zTVzEyPhbCAe5iJpwxPfR2u8Zf2N4EvTYKWRANsIkWU+osXoV2p8bpZ2jJHGO9zVJO0T1ziBpL+1EsWdJjVXQmfkaOqU6DZ9xvz7gPeiYUuHhmmhtKZFewkN+B6qBIrJfWRcWie98ZDBqZMg6aMgSt1I6CR/zPujW+HzhZAl0T3rQUfjieEyBZMJ9sX+i5yzt2TfoCFSFR1xP9DwHsUayMQlIJrwMP7QxhoaiSEucFaS6ZCRVNJKlHE+YnpjuLh4II1I1yEjSMTgLWmuClOMJe7Ad+c5ECLcPruAPnvnSo3tGgpTthKWpX4+MceWJVg1SbfLqZkFSJh/fAjvhpiHy8TBqcQ0mKVMsboGdsH7WjZzYuyqkAbuIjFHiwQI7Yd1YXYOrCBXN4yLcNMJMmHJQ+swrcBUTzeVsGTmAjXCoeVVjJ9V5CulSBpGxCWQgDMpkBqVnE3ND9byYOTFhIxw161ykUt1GCD8j3z1zyshMWM9k/IKXhxXTYPp4+D+BmTCH6gKDecE0iRq3oU3CY+ViPrgOdRuGZqHZJBwo331wHbqzYTxZzIQb2mQ/ziGvHDLQia7PU4T2NGyCTMipYdc6uApToGNJKsYFD9E/NOAjuIvo2pjdDbYTDpUIhGJjF9VaqnM3MqYn+Z5gJ/yoVRdaqDo74Boyxu12wuSQ66qx7aCU1ZTORVygE+9pTbSUjltSHnIi60fGQpEBsSK58nDMLw3JgM4i+jFiIcu1d5Ex0sgeW4v7W7IvPTEm7s4qVW26d9NY1EssDiQTpsqcmhkkNWpCH6pCUxQHfGV0kCZJka6YJlsbbgwu5ghVe7EllyEnst3IGAX/PfYhzd/TVw9lVf4GVBeOSpiy4aTcCEuqMWlVV/lljHraSZuCKqYgnrPvIhF9TMg1RW3a134rrSBOkBc2qbC0mCc8VckyNUiqdM2m0CzfMGMra5/H/E0tnnjiJksdABXc8nTSEdFX6ORMRFnU1jizoKaWKeL6Lp4xAkrgpyFPJCkiW8JAYILvtnZFJnq91uZNG+fvxDvih1qV0QQujIsMO9lM6EkPTD40H5IxwEL8fp7adDGthyTtCZ6NrKTWQy4aTg+K6LkshvAUcm+TtItJFhRIdIpiCU/x3Ea4mVHqVAkktb+At7j/S2irKIewCipsyXpV+19FYJpSvRfZRUoaUh6t6oCkRo0aNVzDX2qpg7pu/G77AAAAAElFTkSuQmCC")}#toolPanel .right-top{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGcSURBVHgB7dk/TsMwFMfx33M6RCoLG4Kl3KRH4Ah0ZOMKnABu0HIDbkC5AUfIAnTMQFGl/jF5MkMRKpIT59mu3met6qev0liNAyillFJKKRUEQVp5NkIIq0WFFuSCm9DCmOdm4ghhVES7yeZzMff5koGQoqBpwFg2stZM4UksGJZqJEAs2BDdWWsrRCa+aZWem9aabwXQ+MDH1Xb5fgkPAwhbeeyuZng+ba7IGAHJ3cOefmKvEViSwYdj7SM6Si74UKwBTbZbO0NHSQX/F7tevs0QQDLBErFuvQRIxbo1I5OMdetGJB3r1o4kRqxbP4JYsW6GsJixbo6g2LFulpAUYt08iSGJxLqZfQ8IGVuWr82z8f7JyRyeej0A6OXKNgcIg4JuQVRvBl8PqGuvo6PeglP6Ge/rJTjVWBY8OOVYFjQ49VgWLDiHWBYkOJdY1jk4p1jWKTi3WNY6OMdY1io411jm/V/aDC/uc41l/g8P1l79XSSPWOYdTPT7lWdOsayAJ1ucvBiD0+YFd0Vmd7NZfjxBKaWUUkopdfS+ASmNvgIGrsXnAAAAAElFTkSuQmCC");background-size:cover}#toolPanel .right-top-active,#toolPanel .right-top:active,#toolPanel .right-top:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF3SURBVHgB7dpBSsNAFMbxb4roRvAK9SY9gkewSymCR9ATVBfq0noSewSPkCP0ANJxvropaISXvLx5A+8HbUpDAn8yCWESIIQQQgghBBUJ1l7zHBpuUocB7ILXJfQUH+XXHDo67LHEbdpKNprByhneoBeLw75mh32K2AVn7OCAXTDwUE6gDpX5v2jlMmwzFj1rO6zSJQROYE1ydX3OPEcXUGQ5pGV+Yq+hzGdwX2zGO0byF9x/ZJcleIORfAX/F7tKGyjwE2wQSz6CjWKpfrBhLNUNNo6lesEVYqlOcKVYsg+uGEu2wZVjyS7YQSzZBDuJpemDNWO/8Fm+j2dOthCadgJgiiPLCYQ97spnh3M8YplEU0fTBTsaxsemCXYaS/rBjmNJN9h5LOkFNxBLOsGNxNL44IZiaVxwY7E0PLjBWBoW3Ggsye+lX/IajcaSPDjj6o9/m4glefDvR57NxJL86WEqgXvcl+VFWT5JXzkIIYQQQgghtOkb2FSXUxZQW5sAAAAASUVORK5CYII=")}#toolPanel .brush{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALESURBVHgB7ZlLbtswEECHpOykcQoIBQok6UY9QZsT1D5BkhMkOUpPEPQEcU+QLLtzdt26J6g2RQt0US0qRLBCMTMGHMiybJPyjwT4VtJoCPOZ1FCiADwej8fj8Xg8m4GB5YjOuytQxZkC+MgYxNjh4ZNUXyD7E0MD7BUOw1Dkr+6wi92aqzGH/CJP/w7BEDuFUTbIDwY0qguyEpTumUrbJ6wnO8FYmoNNzJHF8wSguMaD+2qLAlqDVuetzp8zxp4RXiBbAOtB+ms8iqJz3MduX1ZaJ1IWpzqFTIANaMqOY/n/e94+fI/S5dx9xoHhtW/Lfmr3U9pAdoJMf19hxtdyjAE7Aw12K7ygQDGurutkJ0ip+pVQBBrsTnhZNS7YDewfRXPbCn5TDilQWpV6N8J6S08kBB/MSM9pi1PaUuEF96xSKq5kT0vPbatirNKfQYPtLkvLCpSUCedswBiLKi1jOcovgnbrtk62kKqn+2y9PWHdaoyjOUd6BlNZYjvCpkuPhnQTWWLz93CDdZYkivbeKebUFqKmssRmhZvIvpDUdm4VWWJzU3oV2QXVeBVZYjPClsoS6xe2WJZYr7DlssT6hB2QJdYj7IgssbqwQ7LEasKOyRLNhR2UJZoJOypLmAs7LEsY71oG4s13V2UJo5cH8fr43GVZwkhYSea0LGEkzJj6NB3BvWGHZAnD92Fe2SlUTskS+sJhFGJ3w3JIjmS9sKWyhL5wls3uIec1nyktliUC3UTOeXc6oh5eDlES0lbEg6DLc3ZpqyyhLYxPKB/K5wpYKDont7h53mU5i6A9iU9jkyyh/aQlDk5+YnYEBtgmS+gJY8ES+egfGGCjLKE3pbMsBLG8vtG3Idw8f1CF+lHsPfYhTRKwDJMpfYfZ55PzshwXavgUZENI7BOsYvS2FBwedZkSSd5KYxfkPB6Px+Px2MUzbTi7WUXRE4wAAAAASUVORK5CYII=");background-size:cover}#toolPanel .brush-active,#toolPanel .brush:active,#toolPanel .brush:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJySURBVHgB7ZnRbdswEIZ/qUFbBH3ICN6g7gR1J0g6QZPHon1oR+gEQZEGeUwyQbpBMoKzgTaIXxMgZu58cGDLknwnWfYR4AfQtiiS9meSR9oEEolEIpFIJBL9kME75+GYPuUhAob0XFDOGI/4i99ZgRb4FT4NB3iHGxIdVdwtKH3Fj2wMIz6FWfYtbunVsKHUhNIXq7Q/YZ3sHLN0Dk/Uy07wjBPqnv+l/ANKtzTPNV/ODD893CS72Iv/whV96m8rZZ7wSRPIfPSwVpb5mR1TILsuleP6v6Bg98IW2TnV0odQsFvhpgA1pTnbFIwCrko5AyjYnfC6aJzjlMoMauvy/WVUkXo3wrqlZzArU5aur+tUuGnOytZxkWXpurpcL8cfKNjusrQuQOX0HOh+WJmPBXgrCVyiSjajut91e+vtCWuj8QX1ZrX0KkZZqbINrEuPRrqFLNP/HG6zzrLEI+2c6gJRS1mmX+E2suvoICvV+6KLbFM07iArTfSBU1lpZtM4lpWmNolzWWluU0QgK01ugkhkpdmuRCQrTXchMllpvi0RyspbtCFSWXkbKxHLMva9dMSyjE34LBwhYlnG2sNRyzI24Tf4XMq5jkmWsQkHwz+FDmUZvTALyOHVIuPasg5lGb3wXsV/yFXD2bEss2coO1q6ynD3+lokB7PTejnZcynL6IVzfFy6DjS8L8IlnQGNMD/XqdrGOJJlLD08XLmerjmldybL6LaWMmQfYMGhLKPr4fc0fKeqkgWlOxru99in48yTbAJn6H88nIcbejxayCkwlwu0PH2g5FCwjO3X0lkYzQ689kk2ArlEIpFIJBK+eAGdRGPGDQz7SwAAAABJRU5ErkJggg==")}#toolPanel .mosaicPen{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAOtJREFUaAXtmckNwjAQRcNSBg3QCkVRIXQBZxogghlxQ7Zl8YKSSG8kX2bx8r4PtmYYNAlIQAJLJXCOjT1jvGYet1j/FKNom6L348zN7xrx3tC1N7GSdwz/I8ahEq+6pyJfXaAzcIm83EvRtkXvipweYG6xVEAFIAGvEASIy1UAI4QTqAAEiMtVACOEE6xegdb58w2eb3Fqf/1XrF4BD0DvF61XAUqQ1qsAJUjrVYASpPUqQAnSehWgBGm9ClCCtH7fmOAesWwuTPEnaCzTFRq7sr6Ssq2T7Z2pPiS/zpOdomx3aRKQgAQWSOANmudym8Lt+O8AAAAASUVORK5CYII=");background-size:cover}#toolPanel .mosaicPen:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAXxJREFUaAXtWU1Kw0AUfm90UeyuIih4Add6ATeinkP0TIrnqOLGC+gtFASxu0o2zpgpSUngvaTtS6YtfFkl37zf78tiZh4RHjAABsDAOhlgLfnBS3btvX8MIRxpNilwJv50O+72+2IwlvLtSmDEiuIPtfVlcGZ6X8a+ZhvoxP/5hxw7ruHFh9pAhfkxDfhucr73IQVowkZP0xDXfy6HZ012TWv7z9O3EOhUs3Hawhxfsfi5f88vrQ2swnzPNdfCtzZQs97ADzSwblGgABQwMoBfyEig2R0KmCk0BoACRgLN7uqBptwKmzN0FGByNRRr3fpfSD3QROLiScpyGClV1NhbRJwyhma79QqgAU3aVDgUSMW0lgcKaMykwqFAKqa1PFBAYyYVDgX6ZHr0+iteqVdzbqwCs+KzcF8tVnpXt9NxMkL5cCHez0uOi2D5vf7sadsSi7GywpkoMPOXaJODagNxrBMnI03DBS1ol3gs3jl302VMxAIDYAAMdMfAP+EdVKaWg/p6AAAAAElFTkSuQmCC")}#toolPanel .mosaicPen-active,#toolPanel .mosaicPen:active{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAV9JREFUaAXtmU1KBDEQhauiC9GdIih4Add6BhnmHOKhxHOoeAY9hjAgLkfcTGo6Mo2ZpivW2F3GgZdNJ5VKVfK9XuSHCAUEQAAEahJgLfnx0+c0xngnIqeaz1/Ymfg17ISbt6u9+758u33GZFtN/kTr38TOTC+b+K/5Cp3HRbxtbGdr9lVDXcA3ef4gkv2+wVbb++Tg0urb9Tt6nD+L0EXX3rZDW9G/wyavxx2nx7CAcRJ5RcECvMha40IBKykvPyjgRdYaFwpYSXn5QQEvsta4UMBKystP3U6PmfDwYS6/jddspYtl63+hogLpJDXkMDKEfBF71rn1CmABmZpVqlCgCvYsKRTIYFSpQoEq2LOkUCCDUaUKBapgz5L+cwXS1X65qNvp9DJCzeNCup8vh9B7fzqM6CPbnq+rfWHmWWvpftUFpGed9DJSelzoBvNop8mHEK49YiMmCIAACAwnsARsm0C5E2sdIAAAAABJRU5ErkJggg==")}#toolPanel .separateLine{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAA2CAYAAADgQzjYAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAApSURBVHgB7cixEQAABARBr3H6NEJ9IFWA6C+6WcgUWQ6F7aucCATCLzSr6QQMe0nWygAAAABJRU5ErkJggg==");background-size:cover;width:1px}#toolPanel .text{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANiSURBVHgB7ZnfUdtAEMZ37zAQlMyIh8zw5yGmA5egVBA6wB0QKiDpADqADuwK4hLoAL8k8BY9xEyIo7usTAzW6Yyc094lk7nfDMx4Ldn+dKvdT3sAkUgkEolE/hYIgRFbe6eIOqOvHheduxPI8xz+V2Sy35fJnp7/iWT3DAITdIXl1t41fWN3IZTTKh+EXGUBoUj2e4bYklTcv+hDQIIJlqCPbXEU8A4CEm6FNWT2NzBbe7mTQSDCCN4kQfV0fkRpPIRABBEspTh67n0EPII0TSEA/gWn3VJIv+koOU2CrLJ3wXI6rQnRSp/Uj1TPZgEXAVK6LkRpPSDZo2oUM+i87oFn/Are3OnOhFQgod9vx2QvP5qHi07He1p7FSzQVn31Zfn/57fbEV2MisNChGPwjFfBiGgKyIvJ7cX8hdb63Hg/9d2T/Qm2W8nB4guFODBP0xpPwSPeBNusJKK6rAQmn6+sxctjT/a3woaV1KDHD/etcZiCoRkTP7begye8CJavdg8t6Ty0Has2Ni5CFi8/K6yw9gSkCm1/2M/HuQa4NKLeihe/4FnvrVpJSuersvcuO0VgEax4sQuWUmZmDKHWfio83NthipeHlK5byaKAUdNZoYoXr2CbldR6+Fw6z7EVL4H80xBWwVYriXqw0smW4kWve9zFi1Vwk5Vs/DGW4sU9DeETbB/jrLa6vymLF63q1WKMexqyBkzYxjg09O7JZPcT/BHYnSXzE7NRroKcZWjPNoi3DNkZ0aNicvMWGGBJ6SVWkhG+US7PPWyxktxwFa/2KU29l+7f68UQ3YE59d9W+0VU8btGiGUfqnXRerCSlSJDV1GdFHertyMbtK36gZ6aFv00S/FiSGk3K9n4qevrNWEc+1DtBLewko2Q8/Ixym0lWAjRrwVXtZIr4GOU26pomb23HOOoyc0BMCKT/a/0yYtOi+zql21wxH2FLVaSbOAImOEe5ToLtlpJcyrJAPco1zmlQ6Tz43fN/Hi1OFJP3nbpyU4rbLWSGtlX9/GjGachbildYH1HUKkL8MSSUa7T9qqT4HISYURGLL13GUtGueCAk2Dqj+NqRHtL5zmqKM6oYo+ffgOcgwNuRSvtpnJ6X1q/N3TFhtPJDcvDeSOzBxXISKx12yYSiUQikci/zS+amzngvBJLrAAAAABJRU5ErkJggg==");background-size:cover}#toolPanel .text-active,#toolPanel .text:active,#toolPanel .text:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALxSURBVHgB7ZnfcRoxEMa/498zqSDnDijhOkg6CK+Jk0mowE4FNsMQv5IOSAVxCXQQOgh5tRMUifPZ3GnhjLS7ftFvxnhOcMCHVrufVkAikUgkEomXIoM2N+YCBoX9W+MOE0yyDRTpQZO5GWOLy8frAf7Yxy9QpANdLhrX73BlhlBET/DcjOxj3hgdoo8xFNGc4c+gv8EbKKIpuCBHXQKbmQJK6AguBeU4/C3eQgkdwR2bnI6jlrzkBZdCxi2vGqKrM8vyggeEEGMNR5NeaxSwIC84I4R0sbTjt7Uxl7zK0iWKrOArk++E7OOEvs/W+IevxB3iYS0ruE+G8/fd/0/ZrX1s+mi6VjMiKzjzBGxwni0er7aYNp4fStdkOcG0lVyi/ulL776u57dZkZxhPzy3D+FccZ6tyOQlWJMlBRe1q8zuf8t1W2eLH97YQG7LKCN4ZlyyymtjhhDmuMcCislLRjC1A+rgmnyt63g0Q10wefELdrXXt5KrXe09jFry4hc8ILeB06P3uLWtlLz4BVNWstMQQ6GUvHgFU1YSVsjxcC6hkxd7N4RXcJ/0wks8Bzp5jbiTF6/gNivZjv/jMHdD+ATTbZznzW5FaUxWjVHWbghfI55u44zwzfzEKWztj1Y/D6lauddggPPkoSDGRjaJnQZ1+FMaGRbBPCFNWUlOGFu5PII1mulMySv+9NDV3gF+NUY38GvqqeTee97hLPa0MX4N01ZycmI58pmZSzur+36aJXnFh3SolWzjLyGMYenECY6xkm240BVo5cYJ7pEnCqeZjWMItHLjktbcuGSV773bGh+yM3AyN7/h1u8Tzq6+QiDhM0xZScOwdpswt3LDBVNW0t/txMPcyo1Zw0Xt6lBXMhbmVm6YYLoryT+7FYzdkDDBHbL2LiAF3Q0JOl4NDel6LaxOBKU41MoNIEywW6/7SIZzRc86r/rnThFAWB12CaO/s36v4ZzVx4xlr9rKjXV29zZhSSXIRCKRSCQSovwHybzXUxgaB2wAAAAASUVORK5CYII=")}#toolPanel .save{background-size:cover}#toolPanel .save,#toolPanel .save:active,#toolPanel .save:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAK8SURBVHgB7ZpRTtswGMf/tgsrpUzRnlqeshtwhPYG2xF2grGnPVJuUE6wM+wEYyeAPe6J8LCBtIdFKmhdS+PZliaaVK0TJ3ZK8E8CtV+b2L/Yce3PATwej+cJweCaIAgoffWR7XbfJKz7HQ93MRzSgmPYrHMBgpCLf4zhaAEM4RACl7R7IWP0ajm0WPAQ05trOILimeGFm44XbjpeuOl44abjhZuOF246Xjg3YiGv/lxTslwjYbrXf8/m+1ds3vlNO4cncESq3L3+MQwoLhyEAaFkDHB1lQnByIW0LCNVLiUnJi1t2KVJKg9lW1rJijIyYaNuXVw4jmKO5DQbtiW9RlaWd4o4LpwANGrh5P5mrApcrUSl0ptkH+5+jmCA8SgtC7QpbUNWnRclsCVtS1adGyWpWtqmrDo/KqAqaduyqgxURFlpF7KSSveWktnknL04kLsZg+W4qPSA7ByAc/6NUpKaIXGOMd19eexCVlL5ZtpGaUoC8cFRKi5jBCvTRBuyEr2wwW7fWumM7NpYEdmC9dPuHpru9skKt7qHsssWGqmLtmzR+m3ePaxgt09Ij/JKF+7GBvWzngBYN3pnsXXPZnGS8dBJu5KVOEvxbPiddiYrcZrTWpbmYqFJwT+4lJU4f8ZDCQbBWL5ODNazZXEurKhB9D8+TZtiehtlQ60Wf43tIVyJaOYIOVqYn6feceIsLauDUfpp+T0Hv9Qdo72HheBXOfF/jJAB2+9/ETMaOdpGqAcxw1IXPlwOEvAz3YH6B9NEHprO/l4QQkJsMaJ1I5Fc1N5u+i4t0rKM0LfZXPQ2IX/TE8g66sk1Ss/vf1yKLw7FAj7ClqFaFmQIUcc838+dAEjmk1vOup9bFNeigJ64F3qoEXnxRfbkbLHz5x0mv6K8x5V6uLQtlmeogWl7Gtc5efF4PB6PpyL+AYIPPUb9sB23AAAAAElFTkSuQmCC")}#toolPanel .close{background-size:cover}#toolPanel .close,#toolPanel .close:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAG2SURBVHgB7dpBboMwEIVhiLquyqLXibhZ6c1QLtIDdEFPAOUtkKIEkMee95zF/FKUKk0FX4xU7LhpoiiKoiiKoqhOP33/gUdTudzzuFjePF2vX+/LMuGBn5tKlZxHm/rGaf005/UA969dlmXobrfvRhiAc9sO969d2rbrxvEv5e9NI/wYDqwc6T2stWQwPsH1YE+jqUIfYXFOqaOLki/prd++H9ZL+QnIvLzPsJ/jODSGzGCkRHtiURYYKdDeWJQNRkw0A4uKwIiBZmFRMRh5oplY5AJGHmg2FrmBUQlagUWuYJSDVmGROxhZ0EosooBRClqNRTQwOkPjWY1FVDA6Qu/FxiI6GKWgFVgkAaMztAqLihYALL3N85LzO+8kI5yyUqFaLqKDLcsyCjQVfPZ/Fs/qlRNEA6fcVNRYLqKALXdQarQ7OOd2UYl2BZfcG6vQbmCPiYAC7QL2nPWw0cVgxhSPiS4CM+ezLHQ2WDF5Z6CzwMqVCm+0GVxjWcYTbQLXwG55oYt2ACDl5P0QLdwBIMMiHGvvS3lL2TsA1NitR7R1B4A5XNrTC2xbepXziKIoiqIoOuwfOs4hnf5I1CMAAAAASUVORK5CYII=")}#toolPanel .undo,#toolPanel .undo-disabled{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMVSURBVHgB7ZrPbtNAEMa/3bVj3CQUNWmjtqoa7vTEiT4AvbSvyUNwoZyQEOXSikNEJTi0ARqQkBunTuwd1hEtdkOzzl850f5u9nq8/ry7s+MZAwaDwWAwGAxzgmFSVqqbgL2FiHsILhrIORYmoFCqPQsl3+8fCAlZrDlofz9FjuEYE8vdfnEn9hbCLnLOGCO8XhKudSCZrAy28SZyzoiCH68Jlx8QQ/l+iyR+is7FCXJOZqeVWq/JG0gKIkEf8752b8kkOF6vagrvDRgz6kYRjlEKf2JetDYC4FMXY6IVbDkbL6UQdeQIRsxjJJvhTfQBuLoexVYMb96uwGH7yBsMDjFW4Zaok4smut1OVlPNtrTqqWkbIKcQo7KQxSOUy5WsNpoRvoqIFSXjbAe5hQkunR0Kdxrx82qvRhbUG1Rv8pCIOSnjvtNib1Dq/cK8CIKCiFb2CXwzeVoCJ/Cb2m1xhFi6WhauOCTGB/dgwY/hzTeOFiu1o6To/stvr73SeXDNlE7idyl0v3KL1dXd0yNNVLfsMmTvem6RFvXcJrNFYqtkggp+B732j2F2IwiOiUXvNrjt11QHqZEmYIsKxa6uw+nhd7ld3Eo+BzEZqf7Ph1mNKDhGObJeu0HWakFNo1qyJUuH04S4C8b/xQichKDQOxtmM/bXkoqb3/UdRRJpe5gngZOK8OJtSmcyxggnUGuW+COPRDyl+Tk6l+8xVxwrvY7Vc6w+asD3H3RcEyUA+gStBgLkPtNxy/hTekExgpcdI3jZMYKXHSN42TGClx0jeKFYQWngXKs19BN1sQVH6RpXnNfSmSy0YAv20+RxBHmps1lgweslKe7Vo0P7i85qYQXHNeqBk0GgzZpOnvEYRrWqzTGNjI+SgHiusqSp8oqUpLIuLW1ObUaC478E+BH5fPqC0U8Jp4iribjpZSrGz0awW9hTKduZiL1PvyB/c/0a8DJlTGc7pWdMPLJ/xWYuyE+Wpn2I0Pn9v5LMtJAkPVUfPqNO8S3wbaRc+OQ/pg1jFk6r9UQFF59zW7M2GAwGg8FguOMPg6ATjq272toAAAAASUVORK5CYII=");background-size:cover}#toolPanel .undo:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKwSURBVHgB7ZphbtowFMef7aajjTTxZVJLv2QnGL0BnID1BvQEYydoe4K2N2hPwG4AO8G2Eyz70FFpXyINOiaw356RJlHDcBJIlkT+SfkQO8/4j59fbL8AOBwOh8PhcOSEgG2pHbX4/ssuXQHOfn6GKsMPjt8Jv4F/L7rvQcHhkBLun1wzzm6WyxiHDhScPUhK7SjYE7yPgE2zijH2EQoOS/S0f9IUiH2yClYaYng7H4+q49KL+Qr4yRSLABEHfF8GsZpYI7yYr4DrBEXA8VzOML/oXJtGEEURpMQqWBw2tAu/hWIR0jWUUl3B9DFMYrhZsJ6z2o2LS8hhdjab/IjtYZvnsOeF9J+kdp8cCBR4A89/1YxrsFlwFEYI5DbFpk6i+1Cv1+M8HCtoeeTaCmBAMdlsdBG0vByDlhSCBKpr6npruRwRrtTT90ubffz3MC04OGcDWlwEq5WqKyeP95Ajwj8eGKIj6T29tkXw+EtLioZKYRsRwzXN3PHDxgXkiJR4bhTV+e+Drs0u2Vpai95/cUoONDSrGIPLXDcPi9fR835QH1o2s+SbBwpkcjJqk2vfmlVxfnC38HujA2+sFpCS+fihRwKfRXDaLYWQIxLADJaBzSbZ5mENwj/qAvIOif0yH9uj5E6hQCoE/7pcRHM7gOno279Mthb8X0khOLVLlxUnuOo4wVXHCa46TnDVcYKrjhNcMoKVkg0bB02pBQshAqPIeqRc7hFG7Bj31uxleQXTXnglBcTwg82stIJ1jtoskxKGVjvIEj0Ku4dOOdgFpWnN9MpdnMRaNoL10Qvng3WJ8yxAwFBJjJUSysSluRC9/MRCpICfxU2bljpKL0YWWBsmDztKl6ZESXmzPiWzG3Tb+kxceb9Ok4jVZHpMW8sgaE23/OTB4XA4HA6HIzf+AELL5fDBKGTPAAAAAElFTkSuQmCC")}#toolPanel .confirm{background-size:cover}#toolPanel .confirm,#toolPanel .confirm:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALrSURBVHgB7ZlNctpAEIV7RPhx8IIjeGviVMEJHG5grxKchcUJQk4QcgI7JzAsAtk5N8CcAKfKga2PwAJVDJQ06Ra2y4hBaIRURlR/O3pGo3makfSeAGAYhmEYhmEYhmEYELBD5O9+mpAyjsF2etbR56aqz84IfjvsfBMSGs8Fx6mpRBuwAyyJJWilFbyBhJMfts/BK5awoafqn+gtjfdsCQyj763jan8fv6s2VMckdkvPxYquty5A/lgldt6eQHL9zoGRhS5O/sDT1LKKVdPv2MQJXi1W3FrFT+V1xydqS/us7H168q8SZIzErHChf1WYZnN9lVhbQOXhsHofZJzErPAsu9fdVCyRCMH5YecKQJY8ZW2xxNYLzg9+XaCxMBercoTW8VRXLLHVgskyorj6UoMjK+iTbyEEWytY6Y8JB2phxRJbKXiVWLKM1lG1CRuw8rVEr4FZOnNiz4ybh7L+vRKWeRgQTW/dzx/roBRML/hUVqIpFwW3kw2V8fvqDcRMmDCgi3JLp9L0oJiLJWRKXLuTiZGwYUAXpWAp8LG/WCnglb+mlYcYoHEljv/yIj/SGhfP6hAhSsGZ6fQSRXqfhLjNoRu1aP8w4J98wqAUPCrXRunJpBK36CjCgC6+4SE3xAlJ9dWnCdGFgZBEFQZ08X0P00kdPLnESSy2yBKZeZo0hCSqMKDLWuPhKzqTu4AQRBkGdAnktGgSAs26a9pfIsB0zb0GUYcBXQJbS/Kvwhanyy2yPjf564kjDOii5aVdt4Xm3Vsn37tOdFxhQBft8OCad0d+9dZJzN6grTQJcYYBXUJ/09r/22lIAcurKgzTOvzYevoZdxjQZaOPeKtESxC/Qdp/hIH/70j4sHTSVxLrnhs2ZP+ufSkN8SVofzcMROyPdYjkM21+0G7iUOcBurbi8Mc6RPLFwyqembRN/fq4D6hXFuvOAyKEvLeQ8kSAcYxbt4D38kiC08tOJs1NfDfDMAzDMAyTBP4D55plBOlQMmwAAAAASUVORK5CYII=")}.__screenshot-lock-scroll{height:100%!important;margin:0;overflow:hidden!important}.ico-panel{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff;height:0;left:23px;position:absolute;top:0;transform:rotate(180deg);width:0;z-index:9999}.ico-panel img{height:100%;width:100%}#optionPanel{background:#fff;border-radius:5px;box-sizing:content-box;height:20px;left:0;padding:10px;position:absolute;top:6px;z-index:9999}#optionPanel .brush-select-panel{float:left;height:20px}#optionPanel .brush-select-panel .item-panel{float:left;height:20px;margin-right:18px;width:20px}#optionPanel .brush-select-panel .item-panel:first-child{margin-left:2px}#optionPanel .brush-select-panel .item-panel:last-child{margin-right:0}#optionPanel .brush-select-panel .brush-small{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKlJREFUeNrs18EKgkAUhWEnwmW1amObHqKeo0ftOfIh3OSmlba0xXSEK4SICAoz4X/gINwL8sE4C533Pok5myTyAAQIECBAgAAB/jdwO/cFO3dsH3v1qmY2LtWHWr/9KyxQOag3Nf2ZnQ17V6vQR3zp4bqktgv+DWYjuxO3eELKkd0zBmCuNgPzxnbBgZXd1kL9WIslbnAbx38xQIAAAQIECBDgqoFfAQYAhLQbgzDvXkAAAAAASUVORK5CYII=");background-size:cover}#optionPanel .brush-select-panel .brush-small-active,#optionPanel .brush-select-panel .brush-small:active,#optionPanel .brush-select-panel .brush-small:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALhJREFUeNpi/P//P8NgBkwMgxyMOnDUgaMOHHXgqANHHTjqwFEHDm0HslBqAB+jGIhSBeIOIHaBCu8B4gogvv3p/yuKzGektMEKdKA6kDoBxAJoUh+A2ALowJsDHcVtWBzHABVro9RwaoTgRxCFQ/oLMAR5R3MxAbAHj9yuweDAamiGYMCSSaoHgwNvgHIrEK8D4s9QvA4qdmPAM8loVTfqwFEHjjpw1IGjDhx14KgDRx04pB0IEGAAHeMoHW2kl/cAAAAASUVORK5CYII=")}#optionPanel .brush-select-panel .brush-medium{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAS9JREFUeNrs2EsLgkAQB/BWupQQHXpczbp36/EB6ptH1M2D17RLhx6XQG9lszCBxEa5zoTQDPxvjv52RR1UWZbVqlxOreIlQAEKUID/Dqx/e2BL9d4t0MP0IS7kBkkgZ0iMub82XrMjLdBQGjXTdgO6jRlpC2QDiX51ixVkClkacMbNhyywR/0COIGMLfrG2MsK9C1xeaTPBdTHzgkezHmR6zoFd88lAOpzDDmAHuHrzeMA9giBXQ5ggxDY5ADeq/4tTgmvm3IAL4TAEwcwJgTGHMAdTillK8FzsTwkawLgGkcylm+xXnlQAhcU2T3baWYLCS36QuzlmahzpX/mrCAHnPE+zYRXhO1strzMRK0n5D0OEQNIJzdMPEf+CGHWL3klf7cEKEABClCApeohwADD8zb9WRTsHgAAAABJRU5ErkJggg==");background-size:cover}#optionPanel .brush-select-panel .brush-medium-active,#optionPanel .brush-select-panel .brush-medium:active,#optionPanel .brush-select-panel .brush-medium:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAU9JREFUeNpi/P//P8NgBkwMgxyMOnDUgaMOHHXgSHcgC7EK+RjFsAmzAXEAFFsCsRQQ/wLiJ0B8HojXA/FGqBgK+PT/FVH2MhJb1WFxYCAQdwGxCgGtd4C4HIjXkeNAcqKYGYg7oRaqEKEepGYtVA8zzaIYCbQBcRkZ+mB6ymmZSULIdByyI0NI0UBKGgRliLtALENhxnwKxErANPiL2iEYSgXHgYA0EIfRIooDqFi8BdDCgaZUdKAJLRwoQUUHStLCgb8YBgCQ4sDnVLT3OS0ceImKDjxDCwduoKIDN9DCgauhrRRKwVOoWTTJJEVUcGAhEP+kVV0M8nk3BY7rJiX0yG1uVQLxFDL0TYXqpXmT/y8Q50JbJXeIUH8HWo/nQPWSBChpUcOa/KHQ1rUxtCEAywhnoU3+1XRp8o/26kYdOOrAUQeOOnDUgVgBQIABAPYuSgtJpajwAAAAAElFTkSuQmCC")}#optionPanel .brush-select-panel .brush-big{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaNJREFUeNrcmMFKw0AQhpOqRdGUCloD2lMv1T6B6RMI4sOK4BM0b1Clh56skFahpVaUaln/wBQkzKYmTbJTB75TSPJlN7uzM7ZSypIc9sYIVuxa0nsdUAcuqIIDUKZrczADExCAJ/CW5OFTNUolaIMGaIGThB80BF3QByoPwVPQptFaJ8JR7YDnrAS3gAfOM/69HoEPFusI7oIrcJzTGngB9+AzjWAod5PBlP5lym+jkqsEt8E1qBW0m4Q2d+A7KljS3OAVKGfRuzzuQkmzWpsG9uQmvTtW0KatxFS0yUEr2ChgUcRFlRy0ghcC0m9LJ+hQXjUdYQqtcIJ1QYeYM07QFSTocoKHggSrnOC+IEGHEywLEtyJyySi4rfgXJDXFyf4LkhwxgmOBQmOOcFAkGDACQ4ECQ44wamQURySC7vNPAgQ7MYdt/pUxJiKCTloBRUV1abCj3YduEwSVvw9A3I9bqHqUl2HSsGiYqSbuY0t3JexR62Po5zkXqn18ZG2N7PsMlxaQptH0TrBs7Jpv/mrMte/bGByx/LiWsBSQ7zgjwADAPqYqQ1c9nN+AAAAAElFTkSuQmCC");background-size:cover}#optionPanel .brush-select-panel .brush-big-active,#optionPanel .brush-select-panel .brush-big:active,#optionPanel .brush-select-panel .brush-big:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhRJREFUeNrUmLtPAkEQh+/UghCxw06JNuCjJURBK+OjsNVEW4KF6P+iYKGF9rYWhmClKKGg8wGNRu2kA4M25PyNGRKFPb0Fjlsm+SKG3MyXLLezs7phGJrK0acpHgP1D0P6sOyzY2AJRMAE8AEPf1cBz+ABZEAKPMkkLxtv33/1+hJbFOwHayAOZuh5i/WoSBYkwSmo2SG4ABIg0OaqFcAOuLAiaOU36AKHIN0BOY1zpDmnq92XxAsuQcyG33+Mc3tbFaQHr0DQxpc0yDW8soJucAb8XdhJ/FzLLSO4B0Jd3O5CXNOSIL2tUQf25CjX/lOQ/t93sHEkeK81FVznruBUBLgRmApuK9B+42aC1FtnFRCkFjouElyW6K12hs6HkCbBsEKnrLBIcEohwUmR4IhCgj6RoEchwcGeOfL/FKwo5PUuEnxVSPBFJHivkOCdSDCjkOC1SDDF05fTYbBLk+AjuFFAMMsuwm3mQAHB5K/G3DAX02HxtkPjZasz8zQN9mZzcY2Haqdit/HWQdRJaOI/cUDumAd6S1MdnWpzXZTLma2cmWAVrIJiF+SKXKsqe7NQAvMgb6NcnmuUWrn6oKBXaQ4c2SBHOSNcQ2tVkOIDbIHFDi15kXNRzk+Z49Z/keaxYIN3e9m2SM9sco605QlK8oZVaxhTV3iZaGMfpTT8XZmPTAU+hJxr7V4B98KJWsn4EmAAKPJ2SXt/mW0AAAAASUVORK5CYII=")}#optionPanel .right-panel{align-items:center;display:flex;float:left;margin-left:39px}#optionPanel .right-panel .color-panel{background:#fff;border:1px solid #e5e6e5;border-radius:5px;display:flex;flex-wrap:wrap;justify-content:center;position:absolute;right:28px;top:-225px;width:72px}#optionPanel .right-panel .color-panel .color-item{height:20px;margin-bottom:5px;width:62px}#optionPanel .right-panel .color-panel .color-item:first-child{background:#f53440;margin-top:5px}#optionPanel .right-panel .color-panel .color-item:nth-child(2){background:#f65e95}#optionPanel .right-panel .color-panel .color-item:nth-child(3){background:#d254cf}#optionPanel .right-panel .color-panel .color-item:nth-child(4){background:#12a9d7}#optionPanel .right-panel .color-panel .color-item:nth-child(5){background:#30a345}#optionPanel .right-panel .color-panel .color-item:nth-child(6){background:#facf50}#optionPanel .right-panel .color-panel .color-item:nth-child(7){background:#f66632}#optionPanel .right-panel .color-panel .color-item:nth-child(8){background:#989998}#optionPanel .right-panel .color-panel .color-item:nth-child(9){background:#000}#optionPanel .right-panel .color-panel .color-item:nth-child(10){background:#feffff;border:1px solid #e5e6e5}#optionPanel .right-panel .color-select-panel{background:#f53340;border:1px solid #e5e6e5;height:20px;width:62px}#optionPanel .right-panel .pull-down-arrow{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAQCAYAAAABOs/SAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANNJREFUeNq01TEKwjAUxvHXOAhKJ3Fwc9PVzbWipxCdHLyMV9AD6A2EegRdvYBOnd3E70ELIcT2JU0C/1BI4AeB8pKUhlMiOqAtKijuGqEj2ne61D/jY1V2QZ+IaI7maKywrdETzdAVDSKi/Lp3tGP4hRYRcRPlly1Uech4FgG3onygtEvvwDijNxtqwiHxCp3YUBscAm9E/8FtcBFaB/vgYrQJdsGdUAkswZ1RKVyH6+hDivJKMCTa/CY9DV26DBlX2MTJB/WFK/yEvmjjM05/AgwANuZSRB8r5twAAAAASUVORK5CYII=");background-size:cover;height:8px;margin-left:10px;width:15px}#cutBoxSizePanel{align-items:center;background:rgba(0,0,0,.4);border-radius:3px;color:#fff;display:flex;font-size:14px;height:25px;justify-content:center;width:85px}#cutBoxSizePanel,#textInputPanel{left:0;position:absolute;top:0;z-index:9999}#textInputPanel{border:none;box-sizing:border-box;font-weight:700;margin:0;min-height:20px;min-width:20px;outline:none;padding:0}.hidden-screen-shot-scroll{height:100vh;overflow:hidden;width:100vw}

/* ============================================
   CAMBIOS SIGNIFICATIVOS DE DISEÑO - INICIO.PHP
   Manteniendo la esencia de la web
   ============================================ */

/* Cambios dramáticos al banner de comunidad */
.community-banner {
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(0, 200, 83, 0.3) !important;
    border: 2px solid rgba(0, 200, 83, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
    padding: 18px 20px !important;
    background: linear-gradient(135deg, #00c853 0%, #009624 50%, #00c853 100%) !important;
}

.community-banner::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: left 0.6s ease;
}

.community-banner:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0, 200, 83, 0.4) !important;
    border-color: rgba(0, 200, 83, 0.6) !important;
}

.community-banner:hover::before {
    left: 100%;
}

.community-banner .btn {
    transition: all 0.3s ease !important;
    position: relative;
    z-index: 2;
}

.community-banner:hover .btn {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Cambios significativos a los tags de noticias */
.notice-tag {
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.2s ease !important;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.notice-item:hover .notice-tag {
    transform: scale(1.08) translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
}

.tag-announce {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
}

.tag-info {
    background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%) !important;
}

.tag-update {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%) !important;
}

/* Cambios significativos a los títulos de noticias */
.notice-title {
    transition: all 0.2s ease !important;
    position: relative;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #263238 !important;
}

.notice-title:hover {
   
}

.notice-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #ff9800;
    transition: width 0.3s ease;
}

.notice-title:hover::after {
    width: 100%;
}

/* Cambios significativos al contenedor de video */
#video-container {
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    border: 2px solid #e3f2fd !important;
    position: relative;
}

#video-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #ff9800;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

#video-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
    border-color: #ff9800 !important;
}

#video-container:hover::before {
    opacity: 1;
}

#video-container video {
    transition: transform 0.3s ease;
}

#video-container:hover video {
    transform: scale(1.02);
}

/* Cambios significativos a la lista de eventos */
.panel-list--events {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.panel-list--events li {
    padding: 10px 12px !important;
    margin-bottom: 0px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent !important;
    background: #f8f9fa !important;
    border: 1px solid transparent !important;
}

.panel-list--events li:hover {
    background: linear-gradient(to right, #fff3e0 0%, #ffffff 100%) !important;
    border-left-color: #ff9800 !important;
    border-color: rgba(255, 152, 0, 0.2) !important;
    transform: translateX(5px);
    padding-left: 15px !important;
    box-shadow: 0 3px 8px rgba(255, 152, 0, 0.15) !important;
}

.panel-list--events a {
    color: #37474f !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.panel-list--events a:hover {
    color: #ff9800 !important;
}

.panel-list--events i {
    color: #ff9800 !important;
    transition: transform 0.2s ease !important;
}

.panel-list--events li:hover i {
    transform: translateX(3px);
}

/* Cambios significativos a la lista de castigados */
.ban-list-header {
    background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid #ff9800 !important;
    padding: 12px 15px !important;
    text-transform: uppercase !important;
    color: #263238 !important;
}

.ban-list-item {
    transition: all 0.2s ease !important;
    border-bottom: 1px solid #f0f0f0 !important;
    border-left: 3px solid transparent !important;
    padding: 10px 15px !important;
    background: #ffffff !important;
}

.ban-list-item:hover {
    background: linear-gradient(to right, #ffebee 0%, #ffffff 100%) !important;
    border-left-color: #f44336 !important;
    transform: translateX(4px);
    box-shadow: 0 3px 8px rgba(244, 67, 54, 0.12);
    border-bottom-color: #ffcdd2 !important;
}

.ban-list-item:nth-child(even) {
    background: #fafafa !important;
}

.ban-list-item:nth-child(even):hover {
    background: linear-gradient(to right, #fff3e0 0%, #fafafa 100%) !important;
}

.ban-col-expires.text-danger {
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(244, 67, 54, 0.2);
}

.ban-col-expires.text-warning {
    font-weight: 600 !important;
}

/* Cambios significativos a los avatares */
.avatar-card {
    background: #ffffff !important;
    border: 2px solid #e3f2fd !important;
    border-radius: 10px !important;
    padding: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
}

.avatar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff9800, #f15d1e, #ff6b35, #ff9800);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
    z-index: 2;
}

.avatar-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 152, 0, 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.avatar-card:hover::before {
    transform: scaleX(1);
}

.avatar-card:hover::after {
    opacity: 1;
}

.avatar-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), 0 3px 12px rgba(255, 152, 0, 0.15) !important;
    border-color: #ff9800 !important;
}

.avatar-card > div:first-child {
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
}

.avatar-card:hover > div:first-child {
    box-shadow: inset 0 0 20px rgba(255, 152, 0, 0.1);
}

.avatar-card__price {
    color: #ff9800 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    margin-top: 8px !important;
    transition: all 0.2s ease !important;
    padding: 4px 10px !important;
    background: linear-gradient(135deg, #fff3e0 0%, #ffffff 100%) !important;
    border-radius: 6px !important;
    display: inline-block !important;
    border: 1px solid rgba(255, 152, 0, 0.2) !important;
}

.avatar-card:hover .avatar-card__price {
    color: #f57c00 !important;
    transform: scale(1.05);
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
    color: #ffffff !important;
    border-color: #f57c00 !important;
    box-shadow: 0 3px 8px rgba(255, 152, 0, 0.3) !important;
}

/* Badge NEW mejorado */
.avatar-card [style*="NEW"] {
    animation: pulse-badge 2s infinite !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
    border-radius: 0 0 0 6px !important;
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.4) !important;
}

@keyframes pulse-badge {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(211, 47, 47, 0.4);
    }
    50% {
        box-shadow: 0 2px 12px rgba(211, 47, 47, 0.6);
    }
}

/* Cambios significativos al botón de tienda */
.btn-outline-info {
    border: 2px solid #17a2b8 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    transition: all 0.3s ease !important;
    padding: 8px 20px !important;
}

.btn-outline-info:hover,
.btn-outline-info.active {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    border-color: #138496 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(23, 162, 184, 0.4) !important;
}

/* Mejoras a las secciones */
.row > section {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.row > section:nth-child(1) { animation-delay: 0.1s; }
.row > section:nth-child(2) { animation-delay: 0.2s; }
.row > section:nth-child(3) { animation-delay: 0.3s; }
.row > section:nth-child(4) { animation-delay: 0.4s; }

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

/* Mejoras responsive */
@media (max-width: 768px) {
    .community-banner {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px !important;
    }
    
    .community-banner .btn {
        margin-top: 15px !important;
        width: 100% !important;
    }
    
    .avatar-card:hover {
        transform: translateY(-3px) !important;
    }
}


    /* Minimalist Modern Login Modal Styles */
    .login-modal-modern .modal-dialog {
        max-width: 420px; /* Smaller width */
        margin: 1.75rem auto;
    }
    .login-modal-modern .modal-content {
        border: none;
        border-radius: 15px; /* Slightly smaller radius */
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        overflow: hidden;
        background: #fff;
    }
    .login-modal-modern .modal-header {
        border-bottom: none;
        padding: 1rem 1rem 0; /* Smaller padding */
        justify-content: flex-end;
    }
    .login-modal-modern .btn-close {
        background-size: 0.7rem; /* Smaller close button */
        opacity: 0.3;
        transition: opacity 0.2s;
    }
    .login-modal-modern .btn-close:hover { opacity: 1; }
    
    .login-modal-modern .modal-body {
        padding: 0 2rem 2rem; /* Compact padding */
    }
    
    .login-modern-title {
        font-family: 'Titillium Web', sans-serif;
        font-weight: 700;
        font-size: 1.6rem; /* Smaller title */
        color: #1a1a1a;
        margin-bottom: 0.3rem;
        text-align: center;
    }
    .login-modern-subtitle {
        color: #888;
        font-size: 0.85rem; /* Smaller subtitle */
        margin-bottom: 1.8rem;
        text-align: center;
        font-weight: 400;
    }
    
    .input-group-modern {
        position: relative;
        margin-bottom: 1.5rem; /* Less space between inputs */
    }
    .input-group-modern input {
        width: 100%;
        padding: 8px 0; /* Smaller input padding */
        font-size: 0.95rem;
        color: #333;
        border: none;
        border-bottom: 1px solid #ddd;
        outline: none;
        background: transparent;
        transition: border-color 0.3s, color 0.3s;
        border-radius: 0;
    }
    .input-group-modern input:focus {
        border-bottom-color: #f15d1e;
    }
    .input-group-modern label {
        position: absolute;
        top: 8px;
        left: 0;
        font-size: 0.9rem;
        color: #999;
        pointer-events: none;
        transition: 0.3s ease all;
    }
    .input-group-modern input:focus ~ label,
    .input-group-modern input:not(:placeholder-shown) ~ label {
        top: -12px;
        font-size: 0.75rem;
        color: #f15d1e;
        font-weight: 600;
    }
    
    .btn-login-modern {
        display: block;
        width: 100%;
        padding: 12px; /* Smaller button padding */
        border: none;
        background: #1a1a1a;
        color: #fff;
        border-radius: 50px;
        font-weight: 700;
        font-size: 0.9rem;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .btn-login-modern:hover {
        background: #f15d1e;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(241, 93, 30, 0.3);
    }
    
    .modern-divider {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 1.5rem 0; /* Less margin */
        color: #ccc;
    }
    .modern-divider::before, .modern-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #eee;
    }
    .modern-divider span {
        padding: 0 8px;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .register-link-modern {
        color: #333;
        font-weight: 700;
        font-size: 0.9rem;
        text-decoration: none;
        transition: color 0.2s;
    }
    .register-link-modern:hover {
        color: #f15d1e;
    }