.fade-in { animation: fadeIn 0.8s ease-in-out; }
    @keyframes fadeIn { 0% {opacity:0} 100% {opacity:1} }
    .author-content { display: none; }
    .btn-hover:hover { transform: scale(1.05); transition: 0.3s; }
    .sharing-modal { display: none; position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); z-index:50; background:white; padding:2rem; border-radius:1rem; max-width:500px; width:90%; box-shadow:0 10px 25px rgba(0,0,0,0.2); }
    pre { white-space: pre-wrap; word-wrap: break-word; }
  
    .metrics-row{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:18px;
margin-top:15px;
font-size:14px;
color:#374151;
}

.metric{
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
}

/* Download button */

.download-btn{
display:flex;
align-items:center;
gap:6px;
background:#2563eb;
color:white;
padding:8px 16px;
border-radius:20px;
text-decoration:none;
font-weight:600;
transition:all 0.3s ease;
}

.download-btn:hover{
background:#1d4ed8;
transform:translateY(-1px);
}
/* ================= MOBILE FIX ================= */   
@media (max-width:768px){

  .metrics-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* center items on mobile */
    gap: 10px;
    font-size: 13px;
    padding-left: 10px;        /* 🔥 pushes content away from left edge */
    padding-right: 10px;       /* keeps balance */
    box-sizing: border-box;
  }

  .metric {
    min-width: fit-content;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f3f4f6;       /* subtle background */
    padding: 6px 10px;
    border-radius: 9999px;
  }

  .download-btn{
    padding: 6px 12px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

}

.page-navigation{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:40px;
margin-bottom:30px;
flex-wrap:wrap;
}

.nav-btn{
display:flex;
align-items:center;
gap:6px;
background:#2563eb;
color:white;
padding:10px 18px;
border-radius:25px;
text-decoration:none;
font-weight:600;
transition:all 0.3s ease;
}

.nav-btn:hover{
background:#1d4ed8;
transform:translateY(-2px);
}

.page-number{
font-weight:600;
color:#374151;
}

@media (max-width:768px){

.page-navigation{
gap:12px;
}

.nav-btn{
padding:8px 14px;
font-size:13px;
}
.metric {
  min-width: fit-content;
}

}

.text-justify {
  text-align: justify;
}

   .fade-in { animation: fadeIn 0.8s ease-in-out; }
    @keyframes fadeIn { 0% {opacity:0} 100% {opacity:1} }
    .author-content { display: none; }
    .btn-hover:hover { transform: scale(1.05); transition: 0.3s; }
    .sharing-modal { display: none; position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); z-index:50; background:white; padding:2rem; border-radius:1rem; max-width:500px; width:90%; box-shadow:0 10px 25px rgba(0,0,0,0.2); }
    pre { white-space: pre-wrap; word-wrap: break-word; }
  
    .metrics-row{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:18px;
margin-top:15px;
font-size:14px;
color:#374151;
}

.metric{
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
}

/* Download button */

.download-btn{
display:flex;
align-items:center;
gap:6px;
background:#2563eb;
color:white;
padding:8px 16px;
border-radius:20px;
text-decoration:none;
font-weight:600;
transition:all 0.3s ease;
}

.download-btn:hover{
background:#1d4ed8;
transform:translateY(-1px);
}
/* ================= MOBILE FIX ================= */   
@media (max-width:768px){

  .metrics-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* center items on mobile */
    gap: 10px;
    font-size: 13px;
    padding-left: 10px;        /* 🔥 pushes content away from left edge */
    padding-right: 10px;       /* keeps balance */
    box-sizing: border-box;
  }

  .metric {
    min-width: fit-content;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f3f4f6;       /* subtle background */
    padding: 6px 10px;
    border-radius: 9999px;
  }

  .download-btn{
    padding: 6px 12px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

}

.page-navigation{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:40px;
margin-bottom:30px;
flex-wrap:wrap;
}

.nav-btn{
display:flex;
align-items:center;
gap:6px;
background:#2563eb;
color:white;
padding:10px 18px;
border-radius:25px;
text-decoration:none;
font-weight:600;
transition:all 0.3s ease;
}

.nav-btn:hover{
background:#1d4ed8;
transform:translateY(-2px);
}

.page-number{
font-weight:600;
color:#374151;
}

@media (max-width:768px){

.page-navigation{
gap:12px;
}

.nav-btn{
padding:8px 14px;
font-size:13px;
}
.metric {
  min-width: fit-content;
}

}

.text-justify {
  text-align: justify;
}

   .fade-in { animation: fadeIn 0.8s ease-in-out; }
    @keyframes fadeIn { 0% {opacity:0} 100% {opacity:1} }
    .author-content { display: none; }
    .btn-hover:hover { transform: scale(1.05); transition: 0.3s; }
    .sharing-modal { display: none; position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); z-index:50; background:white; padding:2rem; border-radius:1rem; max-width:500px; width:90%; box-shadow:0 10px 25px rgba(0,0,0,0.2); }
    pre { white-space: pre-wrap; word-wrap: break-word; }
  
    .metrics-row{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:18px;
margin-top:15px;
font-size:14px;
color:#374151;
}

.metric{
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
}

/* Download button */

.download-btn{
display:flex;
align-items:center;
gap:6px;
background:#2563eb;
color:white;
padding:8px 16px;
border-radius:20px;
text-decoration:none;
font-weight:600;
transition:all 0.3s ease;
}

.download-btn:hover{
background:#1d4ed8;
transform:translateY(-1px);
}
/* ================= MOBILE FIX ================= */   
@media (max-width:768px){

  .metrics-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* center items on mobile */
    gap: 10px;
    font-size: 13px;
    padding-left: 10px;        /* 🔥 pushes content away from left edge */
    padding-right: 10px;       /* keeps balance */
    box-sizing: border-box;
  }

  .metric {
    min-width: fit-content;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f3f4f6;       /* subtle background */
    padding: 6px 10px;
    border-radius: 9999px;
  }

  .download-btn{
    padding: 6px 12px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

}

.page-navigation{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:40px;
margin-bottom:30px;
flex-wrap:wrap;
}

.nav-btn{
display:flex;
align-items:center;
gap:6px;
background:#2563eb;
color:white;
padding:10px 18px;
border-radius:25px;
text-decoration:none;
font-weight:600;
transition:all 0.3s ease;
}

.nav-btn:hover{
background:#1d4ed8;
transform:translateY(-2px);
}

.page-number{
font-weight:600;
color:#374151;
}

@media (max-width:768px){

.page-navigation{
gap:12px;
}

.nav-btn{
padding:8px 14px;
font-size:13px;
}
.metric {
  min-width: fit-content;
}

}

.text-justify {
  text-align: justify;
}

   .fade-in { animation: fadeIn 0.8s ease-in-out; }
    @keyframes fadeIn { 0% {opacity:0} 100% {opacity:1} }
    .author-content { display: none; }
    .btn-hover:hover { transform: scale(1.05); transition: 0.3s; }
    .sharing-modal { display: none; position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); z-index:50; background:white; padding:2rem; border-radius:1rem; max-width:500px; width:90%; box-shadow:0 10px 25px rgba(0,0,0,0.2); }
    pre { white-space: pre-wrap; word-wrap: break-word; }
  
    .metrics-row{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:18px;
margin-top:15px;
font-size:14px;
color:#374151;
}

.metric{
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
}

/* Download button */

.download-btn{
display:flex;
align-items:center;
gap:6px;
background:#2563eb;
color:white;
padding:8px 16px;
border-radius:20px;
text-decoration:none;
font-weight:600;
transition:all 0.3s ease;
}

.download-btn:hover{
background:#1d4ed8;
transform:translateY(-1px);
}
/* ================= MOBILE FIX ================= */   
@media (max-width:768px){

  .metrics-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* center items on mobile */
    gap: 10px;
    font-size: 13px;
    padding-left: 10px;        /* 🔥 pushes content away from left edge */
    padding-right: 10px;       /* keeps balance */
    box-sizing: border-box;
  }

  .metric {
    min-width: fit-content;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f3f4f6;       /* subtle background */
    padding: 6px 10px;
    border-radius: 9999px;
  }

  .download-btn{
    padding: 6px 12px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

}

.page-navigation{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:40px;
margin-bottom:30px;
flex-wrap:wrap;
}

.nav-btn{
display:flex;
align-items:center;
gap:6px;
background:#2563eb;
color:white;
padding:10px 18px;
border-radius:25px;
text-decoration:none;
font-weight:600;
transition:all 0.3s ease;
}

.nav-btn:hover{
background:#1d4ed8;
transform:translateY(-2px);
}

.page-number{
font-weight:600;
color:#374151;
}

@media (max-width:768px){

.page-navigation{
gap:12px;
}

.nav-btn{
padding:8px 14px;
font-size:13px;
}
.metric {
  min-width: fit-content;
}

}

.text-justify {
  text-align: justify;
}


/* =========================
   AUTHORS MOBILE FIX
   ========================= */

/* Force consistent inline flow */
.authors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Each author item behaves like inline text block */
.authors-list > li {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Keep name + icon on same line always */
.authors-list .relative.group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* MOBILE: keep horizontal flow (no stacking) */
@media (max-width: 768px) {
    .authors-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.6rem;
    }

    .authors-list > li {
        width: auto;
    }

    .authors-list .relative.group {
        font-size: 0.95rem;
    }
}

/* Optional: make hover cards usable on mobile */
@media (max-width: 768px) {
    .authors-list .group-hover\\:block {
        left: 0;
        right: auto;
        max-width: 90vw;
    }
}


.authors-list .group > div {
    overflow-wrap: break-word;
    white-space: normal;
}