    .dashboard-container {

           padding: 2rem;

           max-width: 1200px;

           margin: 0 auto;

       }


       .dashboard-header {

           display: flex;

           align-items: center;

           margin-bottom: 2rem;

           background: #1a1a1a;

           padding: 1.5rem;

           border-radius: 12px;

           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

       }


       .user-avatar {

           width: 80px;

           height: 80px;

           border-radius: 50%;

           margin-right: 1.5rem;

           border: 3px solid #8000ff;

       }


       .user-info {

           flex: 1;

       }


       .user-info h1 {

           margin: 0;

           color: white;

           font-size: 1.5rem;

       }


       .user-stats {

           display: flex;

           gap: 2rem;

           margin-top: 1rem;

       }


       .stat-item {

           background: #2a2a2a;

           padding: 0.5rem 1rem;

           border-radius: 8px;

           color: #888;

       }


       .stat-value {

           color: white;

           font-weight: bold;

           margin-left: 0.5rem;

       }


       .dashboard-grid {

           display: grid;

           grid-template-columns: 250px 1fr;

           gap: 2rem;

       }


       .sidebar {

           background: #1a1a1a;

           border-radius: 12px;

           padding: 1.5rem;

           height: fit-content;

       }


       .menu-item {

           display: flex;

           align-items: center;

           padding: 0.75rem 1rem;

           color: #888;

           text-decoration: none;

           border-radius: 8px;

           margin-bottom: 0.5rem;

           transition: all 0.3s ease;

       }


       .menu-item:hover, .menu-item.active {

           background: #2a2a2a;

           color: white;

       }


       .menu-item i {

           margin-right: 0.75rem;

           font-size: 1.2rem;

       }


       .payment-card {

           background: #1a1a1a;

           border-radius: 12px;

           padding: 1.5rem;

           margin-bottom: 1rem;

           transition: all 0.3s ease;

           cursor: pointer;

       }


       .payment-card:hover {

           transform: translateY(-2px);

           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

       }


       .payment-header {

           display: flex;

           justify-content: space-between;

           align-items: center;

           margin-bottom: 1rem;

       }


       .payment-title {

           font-size: 1.2rem;

           color: white;

           font-weight: 600;

       }


       .payment-status {

           padding: 0.25rem 1rem;

           border-radius: 50px;

           font-size: 0.875rem;

           font-weight: 500;

       }


       .status-pending {

           background: #ffd700;

           color: black;

       }


       .status-approved {

           background: #00ff00;

           color: black;

       }


       .payment-details {

           color: #888;

       }


       .payment-details p {

           margin: 0.5rem 0;

       }


       .view-details {

           display: inline-block;

           background: #8000ff;

           color: white;

           padding: 0.5rem 1rem;

           border-radius: 4px;

           text-decoration: none;

           margin-top: 1rem;

           transition: all 0.3s ease;

       }


       .view-details:hover {

           background: #6600cc;

       }


       .modal {

           display: none;

           position: fixed;

           top: 0;

           left: 0;

           width: 100%;

           height: 100%;

           background: rgba(0, 0, 0, 0.8);

           z-index: 1000;

           opacity: 0;

           transition: opacity 0.3s ease;

       }


       .modal.show {

           opacity: 1;

       }


       .modal-content {

           position: absolute;

           top: 50%;

           left: 50%;

           transform: translate(-50%, -50%) scale(0.7);

           background: #1a1a1a;

           padding: 2rem;

           border-radius: 12px;

           width: 90%;

           max-width: 600px;

           transition: transform 0.3s ease;

       }


       .modal.show .modal-content {

           transform: translate(-50%, -50%) scale(1);

       }


       .payment-details-modal h2,

       .product-details-modal h2 {

           color: white;

           margin-bottom: 1.5rem;

       }


       .payment-info p,

       .product-info p {

           margin: 0.8rem 0;

           color: #888;

       }


       .payment-info i,

       .product-info i {

           width: 20px;

           margin-right: 10px;

           color: #8000ff;

       }


       .close-modal {

           position: absolute;

           top: 1rem;

           right: 1rem;

           background: none;

           border: none;

           color: white;

           font-size: 1.5rem;

           cursor: pointer;

       }


       .spoiler {

           background: #2a2a2a;

           padding: 1rem;

           border-radius: 8px;

           margin-top: 1rem;

           cursor: pointer;

       }


       .spoiler-content {

           display: none;

       }


       .spoiler.active .spoiler-content {

           display: block;

           margin-top: 1rem;

           padding-top: 1rem;

           border-top: 1px solid #333;

       }


       .real-time-support {

           position: fixed;

           bottom: 2rem;

           right: 2rem;

           background: #8000ff;

           color: white;

           padding: 1rem;

           border-radius: 50%;

           width: 60px;

           height: 60px;

           display: flex;

           align-items: center;

           justify-content: center;

           cursor: pointer;

           transition: all 0.3s ease;

           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

       }


       .real-time-support:hover {

           transform: scale(1.1);

       }


       .analytics-grid {

           display: grid;

           grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

           gap: 1rem;

           margin-bottom: 2rem;

       }


       .analytics-card {

           background: #2a2a2a;

           padding: 1.5rem;

           border-radius: 12px;

           display: flex;

           align-items: center;

           gap: 1rem;

           transition: all 0.3s ease;

       }


       .analytics-card:hover {

           transform: translateY(-2px);

           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

       }


       .analytics-card i {

           font-size: 2rem;

           color: #8000ff;

       }


       .analytics-info h3 {

           color: #888;

           font-size: 0.9rem;

           margin: 0;

       }


       .analytics-info p {

           color: white;

           font-size: 1.2rem;

           font-weight: bold;

           margin: 0.25rem 0 0;

       }


       .products-grid {

           display: grid;

           grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

           gap: 1rem;

       }


       .product-card {

           background: #2a2a2a;

           border-radius: 12px;

           padding: 1.5rem;

           cursor: pointer;

           transition: all 0.3s ease;

       }


       .product-card:hover {

           transform: translateY(-2px);

           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

       }


       .product-header {

           display: flex;

           justify-content: space-between;

           align-items: center;

           margin-bottom: 1rem;

       }


       .product-header h3 {

           color: white;

           margin: 0;

       }


       .product-date {

           color: #888;

           font-size: 0.9rem;

       }


       .product-info p {

           color: #888;

           margin: 0.5rem 0;

       }


       .view-details-btn {

           background: #8000ff;

           color: white;

           border: none;

           padding: 0.5rem 1rem;

           border-radius: 4px;

           cursor: pointer;

           width: 100%;

           margin-top: 1rem;

           transition: all 0.3s ease;

       }


       .view-details-btn:hover {

           background: #6600cc;

       }


       .active-section {

           display: block !important;

       }


       .dashboard-section {

           display: none;

           opacity: 0;

           transform: translateY(20px);

           transition: opacity 0.3s ease, transform 0.3s ease;

       }


       .dashboard-section.active-section {

           display: block;

           opacity: 1;

           transform: translateY(0);

       }


       .fade-enter {

           animation: fadeIn 0.3s ease forwards;

       }


       @keyframes fadeIn {

           from {

               opacity: 0;

               transform: translateY(20px);

           }

           to {

               opacity: 1;

               transform: translateY(0);

           }

       }


       /* Estilos do menu do usuário */

       .user-menu {

           position: relative;

           display: inline-block;

       }


       .avatar {

           width: 40px;

           height: 40px;

           border-radius: 50%;

           cursor: pointer;

           margin-left: 10px;

           border: 2px solid #8000ff;

       }


       .dropdown-menu {

           display: none;

           position: absolute;

           right: 0;

           top: 100%;

           background: #1a1a1a;

           border-radius: 8px;

           padding: 8px 0;

           min-width: 150px;

           box-shadow: 0 2px 10px rgba(0,0,0,0.3);

           z-index: 1000;

       }


       .dropdown-menu a {

           display: block;

           padding: 8px 16px;

           color: white;

           text-decoration: none;

           transition: all 0.3s ease;

       }


       .dropdown-menu a:hover {

           background: rgba(128, 0, 255, 0.1);

       }


       .user-menu:hover .dropdown-menu {

           display: block;

       }


       .activity-chart {

           background: #1a1a1a;

           border-radius: 16px;

           padding: 2rem;

           margin-top: 2rem;

           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

       }


       .analytics-header {

           display: flex;

           justify-content: space-between;

           align-items: center;

           margin-bottom: 2rem;

       }


       .analytics-header h3 {

           color: white;

           font-size: 1.5rem;

           margin: 0;

       }


       .time-filters {

           display: flex;

           gap: 0.5rem;

           background: #2a2a2a;

           padding: 0.5rem;

           border-radius: 12px;

       }


       .time-filter {

           background: transparent;

           border: none;

           color: #888;

           padding: 0.5rem 1rem;

           border-radius: 8px;

           cursor: pointer;

           transition: all 0.3s ease;

           display: flex;

           align-items: center;

           gap: 0.5rem;

           font-size: 0.9rem;

       }


       .time-filter i {

           font-size: 1rem;

       }


       .time-filter:hover {

           color: white;

           background: rgba(128, 0, 255, 0.1);

       }


       .time-filter.active {

           background: #8000ff;

           color: white;

       }


       .analytics-summary {

           display: grid;

           grid-template-columns: repeat(3, 1fr);

           gap: 1rem;

           margin-bottom: 2rem;

       }


       .summary-card {

           background: #2a2a2a;

           padding: 1.5rem;

           border-radius: 12px;

           display: flex;

           flex-direction: column;

           gap: 0.5rem;

           transition: all 0.3s ease;

       }


       .summary-card:hover {

           transform: translateY(-2px);

           box-shadow: 0 4px 12px rgba(128, 0, 255, 0.1);

       }


       .summary-card .label {

           color: #888;

           font-size: 0.9rem;

       }


       .summary-card .value {

           color: white;

           font-size: 1.8rem;

           font-weight: 600;

           background: linear-gradient(45deg, #8000ff, #a64dff);

           -webkit-background-clip: text;

           -webkit-text-fill-color: transparent;

       }


       .summary-card .change {

           font-size: 0.9rem;

           display: flex;

           align-items: center;

           gap: 0.3rem;

       }


       .change.positive {

           color: #00ff00;

       }


       .change.negative {

           color: #ff0000;

       }


       .chart-container {

           background: #2a2a2a;

           border-radius: 12px;

           padding: 1.5rem;

       }


       .settings-container {

           display: grid;

           gap: 1.5rem;

       }


       .settings-card {

           background: #1a1a1a;

           border-radius: 12px;

           padding: 1.5rem;

       }


       .settings-card h3 {

           color: white;

           margin-bottom: 1.5rem;

           font-size: 1.2rem;

       }


       .settings-group {

           display: flex;

           flex-direction: column;

           gap: 1rem;

       }


       .setting-item {

           display: flex;

           justify-content: space-between;

           align-items: center;

           padding: 1rem;

           background: #2a2a2a;

           border-radius: 8px;

       }


       .setting-info {

           display: flex;

           flex-direction: column;

           gap: 0.25rem;

       }


       .setting-info span {

           color: white;

           font-weight: 500;

       }


       .setting-info small {

           color: #888;

           font-size: 0.875rem;

       }


       .switch {

           position: relative;

           display: inline-block;

           width: 50px;

           height: 24px;

       }


       .switch input {

           opacity: 0;

           width: 0;

           height: 0;

       }


       .slider {

           position: absolute;

           cursor: pointer;

           top: 0;

           left: 0;

           right: 0;

           bottom: 0;

           background-color: #333;

           transition: .4s;

           border-radius: 24px;

       }


       .slider:before {

           position: absolute;

           content: "";

           height: 16px;

           width: 16px;

           left: 4px;

           bottom: 4px;

           background-color: white;

           transition: .4s;

           border-radius: 50%;

       }


       input:checked + .slider {

           background-color: #8000ff;

       }


       input:checked + .slider:before {

           transform: translateX(26px);

       }


       /* Notification styles */

       .notification-badge {

           position: absolute;

           top: -5px;

           right: -5px;

           background: #ff0000;

           color: white;

           border-radius: 50%;

           width: 18px;

           height: 18px;

           font-size: 12px;

           display: flex;

           align-items: center;

           justify-content: center;

           font-weight: bold;

       }


       .notifications-dropdown {

           position: absolute;

           top: 100%;

           right: 0;

           background: #1a1a1a;

           border-radius: 12px;

           width: 300px;

           max-height: 400px;

           overflow-y: auto;

           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

           display: none;

           z-index: 1000;

       }


       .notification-item {

           padding: 1rem;

           border-bottom: 1px solid #2a2a2a;

           cursor: pointer;

           transition: all 0.3s ease;

       }


       .notification-item:hover {

           background: #2a2a2a;

       }


       .notification-item:last-child {

           border-bottom: none;

       }


       .notification-content {

           color: white;

           font-size: 0.9rem;

       }


       .notification-time {

           color: #888;

           font-size: 0.8rem;

           margin-top: 0.5rem;

       }


       .notification-item.unread {

           background: rgba(128, 0, 255, 0.1);

       }


       .notification-item.unread:hover {

           background: rgba(128, 0, 255, 0.2);

       }


       @keyframes fadeInUp {

           from {

               opacity: 0;

               transform: translateY(20px);

           }

           to {

               opacity: 1;

               transform: translateY(0);

           }

       }


       @keyframes fadeOutDown {

           from {

               opacity: 1;

               transform: translateY(0);

           }

           to {

               opacity: 0;

               transform: translateY(20px);

           }

       }