:root{
      --color-gray-100: oklch(96.7% .003 264.542);
      --color-gray-400: oklch(70.7% .022 261.325);
    }
    
    
    
     
	button#openSearch {
		cursor: pointer;
	    display: inline-flex;
	    align-items: center;
	    gap: 0.25rem; 
	    border-radius: 9999px; /* rounded-full */
	    background-color: rgba(3, 7, 18, 0.02); /* bg-gray-950/2 */
	    border-color: #ddd;
	}
	.custom-icon {
	    margin-left: -0.125rem; 
	    width: 3rem;  
	    height: 3rem;
	    fill: #4b5563; 
	}
	.search-icon {		    
	    width: 2rem;
	    height: 2rem;
	    fill: var(--color-gray-400);
	}
	.custom-kbd {
	    background-color:transparent;
	    -webkit-box-shadow: none;
		box-shadow: none;
	    font-family: sans-serif; 
	    font-size: 2.75rem; 
	    line-height: 1rem; 
	    color: #6b7280; 
	}
	.taj-modal{
		position: fixed;
		z-index: 2000;
		top: 0;
		left: 0;
		display: none;
		height: 100vh;
		width: 100vw;
		justify-content: center;
		background-color: rgba(0,0,0,0.25);
	}
	.modal_box {
	   
		border-radius: 0.5rem;
		
		margin: 10vh auto;
		position: relative;
		width: 60vw;
		height: 80vh;
		border-color: var(--color-gray-100);
		z-index: 50;
		 display: flex; /* fixed missing display */
		flex-direction: column;
		background-color: #fff;
		box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	    /*backdrop-filter: blur(8px) brightness(0.5) contrast(1.25) opacity(0.75);*/

		
	}

	.taj-header {
	  border-top-left-radius: 0.5rem;	
	  border-top-right-radius: 0.5rem;
	  border-bottom: 1px solid #e5e7eb;
	  padding: 0.5rem 1rem;
	  background-color: #f9fafb;
	}

	.taj-form {
	  display: flex;
	  align-items: center;
	  gap: 1rem;
	  width: 100%;
	}

	.taj-input {
	  width: 100%;
	  padding: 0.5rem 0.75rem;
		background: #f9fafb;
		border: 0.25px solid #ccc;
	  border-radius: 0.375rem;
	  color: #111827;
	  outline: none;
	}

	.taj-input::placeholder {
	  color: #9ca3af;
	}

	.taj-input:focus {
	  border-color: #3b82f6;
	  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
	}



	.taj-results {
	  background-color: #fff;
	  border-top: 1px solid #e5e7eb;
	  min-height: 100px;
	}

	.taj-empty {
		padding: 6rem 1rem;
		text-align: center;
		font-size: 2rem;
		color: var(--color-gray-400);
	}

	.taj-footer {
	  border-bottom-left-radius: 0.5rem;	
	  border-bottom-right-radius: 0.5rem;	
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  border-top: 1px solid #e5e7eb;
	  padding: 0.5rem 1rem;
	  background-color: #f9fafb;
	  min-height: 50px;
	}
	.info-btn {
	    font-family: monospace;
	    font-size: 12px;
	    line-height: 1.5;
	    border-radius: 4px;               
	    padding: 4px 12px;                
	    background-color: #ffffff;         
	    color: #000000;                   
	    min-width: 40px;                  
	    box-shadow: inset 0 0 0 1px #d1d5db, 0 1px 2px rgba(0, 0, 0, 0.05); 
	}
	.taj-results{
		min-height: 87%;
		
		overflow-y: auto;
	}
	.result-list{ list-style:none; margin:0; padding:1rem; }

	.result-item{
		padding: 0.75rem 0.75rem 0.5rem;
		width: 100%;
		margin-bottom: 0.1875rem;
		cursor: pointer;
		user-select: none;
		text-align: justify;
	}
	.active{
		outline:#999ea4 solid 0.0625rem;
		border-radius: 0.25rem;
	}
	mark{
		font-weight: 600;
	}