/* =============================
   GENOMEARC HORIZON THEME
============================= */

:root {
    --ga-bg: #050b0a;
    --ga-panel: rgba(255,255,255,0.06);
    --ga-border: rgba(255,255,255,0.08);
    --ga-text: #e7f5f2;
    --ga-muted: #9fbab4;
    --ga-accent: #18c7a1;
    --ga-accent-soft: rgba(24,199,161,.25);
}

/* Page background */
.ga-body {
    background:
        radial-gradient(circle at 20% 20%, rgba(24,199,161,0.12), transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(24,199,161,0.05), transparent 40%),
        #050b0a;
    color: var(--ga-text);
    min-height: 100vh;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Soft abstract pattern */
.ga-body::before {
    content: "";
    position: fixed;
    inset: 0;

    background-image:
        radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.12) 100%),
        url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 150 Q150 20 280 150' stroke='white' stroke-opacity='0.04' fill='none'/%3E%3C/svg%3E")!important;

    opacity: 0.1!important;
    pointer-events: none;
    z-index: -1;
}

/* ===== Background base ===== */
.ga-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at 20% 20%, rgba(24,199,161,0.06), transparent 45%),
        radial-gradient(circle at 80% 60%, rgba(24,199,161,0.04), transparent 50%),
        #050b0a;
    filter: brightness(0.9) contrast(0.9) saturate(0.5);
}

/* ===== DNA / abstract image ===== */
.ga-body::before {
    content: "";
    position: fixed;
    inset: 0;

    background-image:
        radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.12) 100%),
        url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 150 Q150 20 280 150' stroke='white' stroke-opacity='0.04' fill='none'/%3E%3C/svg%3E");

    /* Make it softer using filters */
    opacity: 0.12;
    pointer-events: none;
    z-index: -1;

}

/* ===== BLACK OVERLAY (this fixes visibility) ===== */
.ga-bg::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse 65% 55% at 50% 45%,
            rgba(0,0,0,0.1) 50%,     /* center = light */
            rgba(0,0,0,0.55) 66%,
            rgba(0,0,0,0.85) 80%,
            rgba(0,0,0,0.95) 100%   /* edges = dark */
        );
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    height: 100vh;
    /*background: linear-gradient(120deg, #0f2027, #203a43, #2c5364);*/
    color: white;
}

/* Sidebar */
/*.sidebar {
    width: 260px;
    background: #0b1620;
    display: flex;
    flex-direction: column;
    transition: 0.3s;
}*/

.sidebar.hidden {
    width: 0;
    overflow: hidden;
}

.sidebar-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    gap: 10px;
}

.sidebar-header button {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.chat-list {
    list-style: none;
    padding: 10px;
    flex: 1;
}

.chat-list li {
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
}

.chat-list li:hover {
    background: #1f2f3f;
}

.user-info {
    padding: 15px;
    border-top: 1px solid #2c3e50;
    font-size: 14px;
}

/* Main */
.main {
    flex: 1;
    position: relative;
}

.top-bar {
    position: absolute;
    right: 20px;
    /*top: 20px;*/
}

.login-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background: #4facfe;
    color: #000;
    cursor: pointer;
}

.hero {
    height: 78%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.loginHero{
    height: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    text-align: center;
}
.hero h1 {
    font-size: 36px;
    margin-bottom: 10px;
}
.loginHero h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

.search-box {
    display: flex;
    margin-top: 10px;
    background: #111;
    /*padding: 5px;*/
    border-radius: 30px;
    width: 845px;
    transition: outline 0.3s ease, box-shadow 0.3s ease;
}
.search-box:focus-within{
    /*outline: 1px solid rgba(88, 181, 173, 0.91);*/
    box-shadow: none;
    border: 1px solid #16d2b3!important;
}
.afterSearch_searchbox{
    display: flex;
    margin-top: 10px;
    background: #111;
    padding: 3px;
    border-radius: 30px;
    width: 635px;
    position: relative;
    z-index: 1;
}

.search-box input {
    flex: 1;
    background: none;
    border: none;
    color: white;
    outline: none;
    padding: 8px;
    margin-left: 10px;
    /*border-right: 2px solid rgba(56, 133, 119, 0.75);
    border-radius: 0;*/

}
.afterSearch_searchbox input {
    flex: 1;
    background: none;
    border: none;
    color: white;
    outline: none;
    padding: 2px;
    margin-left: 10px;
    width: 217px;
    font-size: 14px;
}

.search-box button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    margin-left: 13px;
}
.afterSearch_searchbox button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    margin-left: 13px;
}
.searchbox_btn{
    background-color: #0d6359!important;
    border-radius: 50%!important;
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 1000;
}

.modal.show {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: #0b1620;
    width: 420px;           /* increased size */
    padding: 30px 35px;
    border-radius: 16px;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: all 0.35s ease;
}

.modal.show .modal-content {
    transform: scale(1) translateY(0);
}

.modal-content h2 {
    margin-bottom: 20px;
    font-size: 22px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #b8c7d6;
}

.form-group input {
    width: 100%;
    padding: 12px;
    background: #1f2f3f;
    border: none;
    border-radius: 8px;
    color: white;
    outline: none;
}

.login-submit {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    border-radius: 24px;
    border: none;
    background: #4facfe;
    font-size: 15px;
    cursor: pointer;
}

.close {
    position: absolute;
    right: 18px;
    top: 15px;
    font-size: 22px;
    cursor: pointer;
    color: #aaa;
}

.floating-toggle {
    position: fixed;
    top: 6px;
    left: 20px;
    z-index: 999;
    background: transparent;
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: none;
}

.sidebar.hidden ~ .floating-toggle {
    display: block;
}
#closeLoginModal{
    background-color: transparent;
}
/*.modal-background {
    background: linear-gradient(to top right, #0b3332, #76caea, #60b3a0, rgba(203, 236, 234, 0.73));
}*/

/* Optional to remove if JS drives it fully */
.sidebar.hidden ~ .floating-toggle {
    display: block;
}

/*.premium-floating-btn {
    position: fixed;
    bottom: 199px;
    right: 33px;
    z-index: 9999;

    transform: rotate(-90deg);
    transform-origin: center right;

    background: linear-gradient(135deg, #0D6359, #14998C);
    color: white;

    padding: 14px 22px;
    border-radius: 10px;

    font-weight: 600;
    cursor: pointer;

    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.premium-floating-btn .water-wave {
    position: absolute;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.25);
    top: 100%;
    left: -50%;
    border-radius: 40%;
    animation: waveAnimation 20s linear infinite;
}

@keyframes waveAnimation {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(-100%) rotate(360deg);
    }
}

.premium-floating-text {
    position: relative;
    z-index: 2;
}*/
.firstColorBg{
    background-color: #0D6359!important;
}
.firstColorText{
    color: #0D6359;
}

/*.searchboxDiv{
    width: 100%;
}*/
 .variant-wrap {
     position: relative;
     display: inline-block;
 }

/* The input uses a CSS variable for padding-right; JS sets this variable */
.variant-input {
    border-radius: 9999px;                 /* optional: pill look */
    height: 52px;
    /*padding-right: var(--filters-width, 220px); !* fallback 220px if JS not run *!*/
}
.afterLoginVariant-input {
    border-radius: 9999px;                 /* optional: pill look */
    height: 38px;
    /*padding-right: var(--filters-width, 220px); !* fallback 220px if JS not run *!*/
}

/* The right-side dropdowns are absolutely positioned inside the input */
#filtersRight.filters-right {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    pointer-events: none;  /* so clicks on input still work */
}
/* ...but allow the dropdowns themselves to be clickable */
#filtersRight > * { pointer-events: auto; }

/* Make dropdown buttons compact and text-like */
.filter-value {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 16px!important;
    color: #374151;
    width: 118px;            /* adjust if needed */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}
.zygHom .filter-value{
    width: 94px!important;
}
.resultPageDropdown .filter-value{
    width: 83px!important;
}
.filter-value:focus { outline: none; box-shadow: none; }

/* Responsive: if you want the filters to drop below the input on small screens */
@media (max-width: 600px) {
    .variant-wrap { display: grid; gap: 6px; }
    .variant-input { padding-right: 12px; height: 48px; }
    #filtersRight.filters-right {
        position: static;
        transform: none;
        justify-content: end;
        pointer-events: auto;
    }
}

 .ga-footer {
     width: 100%;
     padding: 6px 20px;
     /*background:
         radial-gradient(circle at 20% 20%, rgba(24,199,161,0.12), transparent 40%),
         radial-gradient(circle at 80% 60%, rgba(24,199,161,0.05), transparent 40%),
         #050b0a;*/
     background: radial-gradient(circle at top, #031d1c, #000);
     color: #cacaca;            /* white text */
     display: flex;
     justify-content: center;   /* center everything first */
     align-items: center;
     position: fixed;           /* stick to bottom */
     bottom: 0;
     left: 0;
     z-index: 999;
 }

.ga-footer-left {
    position: absolute;
    left: 20px;                /* keep “Research use only” on the left */
    font-size: 14px;
}
.ga-footer-right{
    position: absolute!important;
    right: 20px!important;
    font-size: 14px!important;
}

.ga-footer-right a{
    color: #cacaca!important;
}

.ga-footer-center {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.canada-flag {
    width: 20px;
    height: auto;
}
.logoText{
    line-height: 0.5px;
    color: #cacaca;
    font-size: 12px!important;
}
.logoDiv{
    margin-left: 60px!important;
}

.premium-floating-btn {
    position: fixed;
    bottom: 226px;
    right: 33px; /* initial right-bottom position */
    z-index: 2;

    transform: rotate(-90deg);
    transform-origin: center right;

    background: linear-gradient(135deg, #0D6359, #14998C);
    color: white;

    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;

    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);

    /* 🔑 smooth movement */
    transition: right 0.4s ease;
}

.premium-floating-text {
    position: relative;
    z-index: 2;
}

.premium-floating-btn .water-wave {
    position: absolute;
    width: 180%;
    height: 185%;
    background: rgba(255, 255, 255, 0.25);
    top: 100%;
    left: -50%;
    border-radius: 40%;
    animation: waveAnimation 20s linear infinite;
}

@keyframes waveAnimation {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-100%) rotate(360deg); }
}

/* Modal */
#horizon-modal {
    position: fixed;
    right: -100%;
    bottom: 36px;
    width: 22%;
    height: 72%;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    border: 1px solid rgba(20,153,140,0.2);
    box-shadow: -4px 0 10px rgba(0,0,0,0.15);
    z-index: 999;
    display: flex;
    flex-direction: column;
    transition: right 0.4s ease;
}

.horizon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: rgba(20,153,140,0.15);
    border-radius: 20px 20px 0 0;
    color: #ebeceb;
    font-weight: 600;
}

.horizon-header button {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #ebeceb;
}

/* Body */
.horizon-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    overflow: hidden;
}
.horizon-body img {
    max-width: 100%;
    max-height: 95%;
    object-fit: contain;
}
.horizon-body p {
    font-size: 18px;
    color: #606060;
    font-weight: 500;
}
@media (max-width: 1200px) {
    #horizon-modal {
        width: 30%;
    }

    .horizon-btn-open {
        right: calc(30% + 12px);
    }
}

@media (max-width: 900px) {
    #horizon-modal {
        width: 40%;
    }

    .horizon-btn-open {
        right: calc(40% + 12px);
    }
}

@media (max-width: 600px) {
    #horizon-modal {
        width: 90%;
        height: 75%;
        right: -100%;
    }

    .horizon-btn-open {
        right: 12px;
    }
}

/* Footer */
.horizon-footer {
    padding: 10px 3px 3px 3px;
    display: flex;
    gap: 6px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.horizon-footer input {
    flex: 1;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: rgba(255,255,255,0.6);
    font-size: 14px;
}

.horizon-footer button {
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid rgba(20,153,140,0.4);
    background: rgba(20,153,140,0.2);
    color: #0D6359;
    font-weight: 600;
    cursor: not-allowed;
    font-size: 14px;
}
/* Button base animation */
#horizon-btn {
    transition: all 0.4s ease;
}

/* Button position when modal is CLOSED */
.horizon-btn-closed {
    right: -12px;
    bottom: 8%;
}

/* Button position when modal is OPEN */
.horizon-btn-open {
    right: calc(22% + 12px); /* modal width + gap */
    bottom: 8%;
}
.format-popup {
    position: absolute;
    background: rgb(19, 39, 36);
    color: #fff;

    width: 266px;
    max-height: 120px;   /* allow more content */
    overflow-y: auto;

    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 2;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);


    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #535353;
}

/* Small arrow */
.format-popup::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #1f2933 transparent transparent transparent;
}

.d-none {
    display: none;
}
.dropdown-menu{
    background: rgba(19, 39, 36, 0.99) !important;
    color: #FFFFFF;
    position: absolute;
    z-index: 9999;

}
.dropdown-item{
    color: #FFFFFF!important;
}
.dropdown-item:focus, .dropdown-item:hover{
    background-color: transparent!important;
}
.btn:first-child:active, .btn.show{
    border-color: transparent!important;
}
.variantCountSvg{
    height: 16px;
    width: 16px;
    margin-bottom: 3px;
    fill: #cacaca;
}
.resultPageCount .variantCountSvg{
    height: 12px;
    width: 12px;
}
.modalBG{
    border-radius: 50px;
    background: linear-gradient(145deg, #2d382f, #364238);
    box-shadow:  20px 20px 60px #2b352c,
    -20px -20px 60px #3a473c;
}
.searchBoxArrow{
    height: 14px;
    width: 13px;
    fill: #FFFFFF;
}
.afterSearchBoxArrow{
    height: 21px;
    width: 12px;
    fill: #FFFFFF;
}
.sideBarHeight{
    max-height: 35vh;
    overflow: auto;
    font-size: 14px;
    color: #acacac;
    background: #0b211e;
    border-radius: 8px;
    border: 1px solid rgba(14, 83, 76, 0.6);
}
/* Scrollbar width */
::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}

/* Scrollbar track (background) */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Scrollbar handle */
::-webkit-scrollbar-thumb {
    background: #18c7a1;
    border-radius: 10px;
}

/* Scrollbar hover */
::-webkit-scrollbar-thumb:hover {
    background: #0fa888;
}
.afterLogin form input,
.afterLogin form button,
.afterLogin form .dropdown-item,
.afterLogin form .filter-value,
.afterLogin form .form-control {
    font-size: 14px!important;
}
.dropdown-menu {
    z-index: 9999 !important;
}

#root {
    position: relative!important;
    z-index: 0!important;
}

.searchboxDiv,
.search-box,
.afterLogin {
    overflow: visible !important;
}
.resultPageCount{
    color: #cacaca;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.08); /* slightly lighter */
    border: 1px solid rgba(255, 255, 255, 0.14);

    /* STRONGER BLUR */
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);

    border-radius: 30px;
    padding: 3px 10px;
}
#searchAlert{
    position:absolute;
    top:70px;
    left:50%;
    transform:translateX(-50%);
    z-index:9999;
    min-width:300px;
}
.HI_premium-btn {
    padding: 10px 18px;
    border-radius: 25px;
    border: none;
    background: linear-gradient(135deg,#14998c,#0d6359);
    color: white;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    margin-bottom: 16px;
}

.HI_premium-btn:hover{
    background:#18c7a1;
    color: #1b1b1b;
}
#cancerSearch::placeholder {
    color: #cacaca;   /* your desired color */
    opacity: 1;       /* ensures full color visibility */
}
.cards-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 70px;
}

.homeCard {
    /*background-color: #1a1f26;*/
    background: rgba(112, 112, 112, 0.14);
    padding: 20px 14px;
    border-radius: 10px;
    width: 304px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    border-top: 3px solid #0d6359;
}

.homeCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    border-top: 3px solid #1b9383;
}

.homeCard .icon {
    font-size: 24px;
    color: #cacaca; /* teal accent color for icon */
    margin-bottom: 10px;
}

.homeCard .number {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #0cd1b8;
}

.homeCard .label {
    font-size: 12px;
    color: #aaa;
    letter-spacing: 1px;
}
.homeCard .citations {
    display: flex;
    flex-direction: column;
    gap: 4px; /* space between citation links */
    text-align: left;
}
.citations ul{
    padding-left: 15px;
}
.citations ul li{
    list-style:square;
    color: #0cd1b8;
}
.homeCard .citations a {
    color: #0cd1b8; /* link color */
    text-decoration: none;
}
.citationIcon{
    height: 20px;
    width: 20px;
    fill: #cacaca;
}
/*.homeCard .citations a:hover {
    text-decoration: underline;
}*/
.homevariantCountSvg{
    height: 20px;
    width: 20px;
    margin-bottom: 3px;
    fill: #cacaca;
}
@media (max-width: 1750px){
    .afterSearch_searchbox input{
        font-size: 14px;
        width: 178px;
    }
    .afterSearch_searchbox{
        width: 541px;
    }
    .afterSearch_searchbox button{
        margin-left: 2px;
    }
    .filter-value{
        font-size: 15px!important;
    }
    .resultPageDropdown .filter-value{
        width: 73px!important;
    }
    .spinner{
        left: 89.5%!important;
    }
    .cards-container{
        margin-top: 38px;
    }
    .homeCard{
        padding: 14px 14px;
    }
    .homeCard .icon{
        font-size: 18px;
    }
    .homeCard .number{
        font-size: 24px;
    }
    .hero{
        height: 70%;
    }
}
/*.collage-wrapper{
    display:grid;
    grid-template-columns: repeat(6,120px);
    justify-content:center;
    gap:25px;
    padding:40px;
}

!* diamond container *!
.diamond{
    width:120px;
    height:120px;
    transform: rotate(45deg);
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 8px 18px rgba(0,0,0,0.25);
}

!* image *!
.diamond img{
    width:170px;
    height:170px;
    object-fit:cover;
    transform: rotate(-45deg) scale(1.2);
}
.diamond:nth-child(2){
    width:160px;
    height:160px;
}

.diamond:nth-child(5){
    width:90px;
    height:90px;
}*/
.collaborator{
    height: 50px;
    width: 100px;
    background: #ffffff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.collaborator img{
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.partnersCard{
    /*background: rgba(112, 112, 112, 0.14);*/
    /*padding: 10px 14px;*/
    /*border-radius: 10px;
    width: 50%;*/
    text-align: center;
   /* box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: transform 0.2s, box-shadow 0.2s;*/
    /*border: 1px solid #0d6359;*/
    /*margin-top: 10px;*/
}
.partnersIcon{
    height: 25px;
    width: 25px;
    fill: #cacaca;
}
.partnersCard .icon {
    font-size: 24px;
    color: #cacaca; /* teal accent color for icon */
    margin-bottom: 10px;
}
.auth-container{
    border-radius:18px;
    background:rgba(5, 20, 18, 0.9)!important;
    border:1px solid rgba(255,255,255,0.08);
    overflow:hidden;
    padding: 0!important;
}

.left-panel{
    background:radial-gradient(circle at 30% 30%, rgba(20,180,150,.2), transparent 60%), #061413;
    padding:36px 40px!important;
    color:white;
}

.brand{
    font-size:20px;
    font-weight:600;
}

.brand span{
    color:#2bc4a0;
}

.hero-title{
    font-size:46px;
    font-weight:600;
    margin-top:70px;
    line-height:1.1;
}

.hero-title span{
    color:#2bc4a0;
}

.hero-desc{
    margin-top:20px;
    color:#9fb6b2;
}

.stats{
    margin-top:100px;
    display:flex;
    gap:20px;
}

.stat-box{
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:12px 20px;
    background:rgba(255,255,255,0.03);
}

.stat-number{
    color:#2bc4a0;
    font-weight:600;
}

.right-panel{
    padding:36px!important;
    background:rgba(5, 20, 18, 0.9)!important;
    color:white;
}

.auth-toggle{
    display:flex;
    background:rgba(255,255,255,0.05);
    border-radius:30px;
    padding:5px;
    margin-bottom:30px;
}

.auth-toggle button{
    flex:1;
    border:none;
    padding:10px;
    border-radius:25px;
    background:transparent;
    color:#a8c0bc;
}

.auth-toggle button.active{
    background:#1b7c6d;
    color:white;
}

.form-control{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    color:white;
    height:48px;
}

.form-control::placeholder{
    color:#889e9b;
}

.form-control:focus{
    background:rgba(255,255,255,0.05);
    border-color:#2bc4a0;
    box-shadow:none;
    color:white;
}

.login-btn{
    background:#1b7c6d!important;
    border:none;
    height:50px;
    color: #f1f1f1 !important;
}

.login-btn:hover{
    background:#239986!important;
}
#loginForm .form-control,
#signupForm .form-control{
    background: rgba(255, 255, 255, 0.04)!important;
    border: 1px solid rgba(255, 255, 255, 0.08)!important;
    color: white!important;
    height: 48px!important;
}
#loginForm .form-control:focus,
#signupForm .form-control:focus{
    background: rgba(255, 255, 255, 0.05)!important;
    border-color: #2bc4a0!important;
    box-shadow: none!important;
    color: white!important;
}
#loginForm .form-control::placeholder,
#signupForm .form-control::placeholder
{
    color: #b5b5b5; /* example: yellow */
    opacity: 0.8;     /* ensures full visibility */
}
.logInBtn{
    /*box-shadow:
        inset 0 1px 0 #0D6359,
        0 8px 30px rgba(0,0,0,0.35);*/
    background:rgba(20, 153, 140, 0.6)!important;
    /*border-color: rgba(20, 153, 140, 0.6);*/
    border-radius: 25px!important;
}
.logInBtn:hover{
    background: transparent!important;
    border: 1px solid rgba(20, 153, 140, 0.6)!important;
}
#pathogenicityBarWrapper{
    padding:5px 10px;
}

#pathogenicityBar{
    display:flex;
    height:15px;
    border-radius:4px;
    overflow:hidden;
    font-size:10px;
    font-weight:600;
}

.patho-segment{
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
}

/* colors */

.pathogenic, .t1a{
    background: rgba(216, 30, 5, 0.72);
}

.likely-pathogenic, .t1b{
    background: rgba(207, 69, 50, 0.78);
}
.t2c, .t2d{
    background: rgba(214, 96, 80, 0.65);
}

.benign{
    background: rgba(46, 204, 113, 0.58);
}

.vus{
    background: rgba(47, 128, 237, 0.55);
}

.likely-benign{
    background:#7ed957;
}
.others{
    background: rgba(158, 158, 158, 0.55);
}
.tooltip-icon{
    position: relative;
    display: inline-block;   /* change from inline-flex */
    cursor: pointer;
    vertical-align: middle;  /* keeps it aligned with text */
}

.tooltip-text{
    position: absolute;
    top: 140%;
    left: 50%;
    transform: translateX(-50%);
    background: #0f2e2b;
    color: #fff;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
}

.tooltip-icon:hover .tooltip-text{
    opacity: 1;
}
.custom-toast {
    background: radial-gradient(circle at 30% 30%, rgba(20, 180, 150, .2), transparent 60%), #061413!important;
    color: #eaeaea !important;
    border: 1px solid #16d2b3 !important;
    border-radius: 5px;
}
.swal-icon-small {
    width: 40px !important;
    height: 40px !important;
}
.swal-title-custom {
    color: #cacaca !important; /* your custom title color */
    font-size: 24px !important; /* optional: change font size */
}
.HI_premium-btn span {
    display: block;
    font-size: 11px; /* optional */
    line-height: 1;
}