:root {
         --brand-blue: #1b3d7a; 
         --brand-yellow: #f4c01e;
         --brand-blue-dark: #11264c;
         --text-dark: #2c3e50;
         --text-muted: #64748b;
         --bg-light: #f8fafc;
      }
      
      body.appear-animate {
         font-family: 'Outfit', sans-serif !important;
         background-color: var(--bg-light);
      }

      /* Hero Section */
      .hero-representantes {
         background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
         padding: 80px 0 140px 0;
         position: relative;
         overflow: hidden;
      }
      
      .hero-representantes::before {
         content: '';
         position: absolute;
         top: 0; left: 0; right: 0; bottom: 0;
         background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.03"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
         z-index: 1;
      }

      .hero-content {
         position: relative;
         z-index: 2;
      }

      /* Search Box */
      .search-box-container {
         margin-top: -80px;
         position: relative;
         z-index: 10;
         padding: 0 15px;
      }

      .search-box {
         background: #ffffff;
         border-radius: 24px;
         padding: 35px 40px;
         box-shadow: 0 20px 40px rgba(27, 61, 122, 0.08), 0 1px 3px rgba(0,0,0,0.05);
      }

      .search-label {
         font-weight: 700;
         color: var(--brand-blue);
         margin-bottom: 10px;
         display: block;
         font-size: 14px;
         text-transform: uppercase;
         letter-spacing: 0.5px;
      }

      .select-wrapper {
         position: relative;
      }

      .select-icon {
         position: absolute;
         left: 20px;
         top: 50%;
         transform: translateY(-50%);
         color: var(--brand-yellow);
         font-size: 18px;
         z-index: 2;
      }

      .select-arrow {
         position: absolute;
         right: 20px;
         top: 50%;
         transform: translateY(-50%);
         color: #a0aec0;
         font-size: 14px;
         pointer-events: none;
      }

      .custom-select {
         width: 100%;
         height: 60px;
         padding: 10px 45px 10px 50px;
         font-size: 16px;
         color: var(--text-dark);
         background-color: #f8fafc;
         border: 2px solid #e2e8f0;
         border-radius: 16px;
         appearance: none;
         outline: none;
         transition: all 0.3s ease;
         cursor: pointer;
         font-family: 'Outfit', sans-serif;
         font-weight: 500;
      }

      .custom-select:focus {
         border-color: var(--brand-blue);
         box-shadow: 0 0 0 4px rgba(27, 61, 122, 0.1);
         background-color: #ffffff;
      }

      .custom-select:disabled {
         background-color: #edf2f7;
         color: #a0aec0;
         cursor: not-allowed;
         border-color: #e2e8f0;
      }

      /* Results Area */
      .results-section {
         padding-top: 40px;
         padding-bottom: 80px;
         min-height: 500px;
      }

      .empty-state {
         padding: 60px 20px;
         animation: fadeIn 0.5s ease;
      }

      .empty-state i {
         font-size: 64px;
         color: #e2e8f0;
         margin-bottom: 25px;
         display: inline-block;
      }
      
      .empty-state h3 {
         color: var(--brand-blue);
         font-weight: 700;
         font-size: 24px;
         margin-bottom: 15px;
      }

      /* Loader */
      .loader-container {
         display: none;
         padding: 60px 0;
         text-align: center;
      }
      
      .custom-spinner {
         width: 50px;
         height: 50px;
         border: 4px solid rgba(244, 192, 30, 0.2);
         border-left-color: var(--brand-yellow);
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin: 0 auto 20px auto;
      }

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

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

      /* Ícone de copiar */
      .copy-icon {
         margin-left: 10px;
         color: var(--text-muted);
         cursor: pointer;
         font-size: 13px;
         transition: all 0.2s ease;
      }
      .copy-icon:hover {
         color: var(--brand-blue);
         transform: scale(1.1);
      }
      
      /* Pulse Animation (UX Gold Standard) */
      @keyframes pulseText {
         0% { color: var(--brand-blue); }
         50% { color: var(--brand-yellow); }
         100% { color: var(--brand-blue); }
      }
      .needs-attention .search-label,
      .needs-attention .select-icon,
      .needs-attention .select-arrow {
         animation: pulseText 2s infinite;
      }

      @media (max-width: 768px) {
         .hero-representantes { padding: 60px 0 120px 0; }
         .search-box { padding: 25px 20px; border-radius: 20px; }
         .search-box-container { margin-top: -60px; }
      }
      
      /* ESTILOS DOS CARDS */
      .rep-card {
         background: #ffffff;
         border-radius: 20px;
         border: 1px solid #edf2f7;
         box-shadow: 0 10px 25px rgba(27, 61, 122, 0.04);
         padding: 30px;
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
         height: 100%;
      }
      .rep-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 15px 35px rgba(27, 61, 122, 0.1);
         border-color: rgba(27, 61, 122, 0.1);
      }
      .rep-card::before {
         content: '';
         position: absolute;
         top: 0; left: 0; right: 0;
         height: 4px;
         background: var(--brand-yellow);
      }
      .rep-header {
         display: flex;
         align-items: center;
         margin-bottom: 25px;
      }
      .rep-avatar {
         width: 60px;
         height: 60px;
         border-radius: 16px;
         background: rgba(27, 61, 122, 0.04);
         display: flex;
         align-items: center;
         justify-content: center;
         margin-right: 18px;
         color: var(--brand-blue);
         font-size: 24px;
      }
      .rep-title {
         margin: 0;
         color: var(--brand-blue);
         font-weight: 700;
         font-size: 20px;
      }
      .rep-subtitle {
         font-size: 12px;
         color: var(--text-muted);
         text-transform: uppercase;
         letter-spacing: 1px;
         font-weight: 600;
      }
      .rep-info-item {
         display: flex;
         align-items: flex-start;
         margin-bottom: 15px;
      }
      .rep-info-icon {
         width: 28px;
         color: var(--brand-yellow);
         font-size: 16px;
         margin: 0;
      }
      .rep-info-text {
         color: var(--text-dark);
         font-size: 15px;
         line-height: 1.5;
         flex: 1;
      }
      .rep-info-text a {
         color: var(--brand-blue);
         font-weight: 600;
         text-decoration: none;
         transition: color 0.2s;
      }
      .rep-info-text a:hover {
         color: var(--brand-yellow);
      }