/* User popover styles (isolated, prefixed with up-) */
.up-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    visibility: hidden;
    pointer-events: none;
}

.up-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.up-content {
    position: absolute;
    top: 80px;
    right: 2.5%;
    border: 1px solid;
    border-image-source: linear-gradient(91.72deg, rgba(255,255,255,0.16) 3.91%, rgba(153,153,153,0) 95.7%);
    background-color: rgba(255, 255, 255, 0.05);
    /* backdrop-filter: blur(92.5px);
    box-shadow: 0px 0px 35.6px 4px rgba(16,24,32,0.08); */
    border-radius: 1.9rem;
    width: 250px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    transform-origin: top right;
    backdrop-filter: blur(100px);
    box-shadow: 0px 0px 53.6px -8px rgba(0, 102, 146, 0.15);

}

.up-header { padding-bottom: 0.5rem; }
.up-header h3 { margin: 0; font-size: 1rem; }
.up-list { display:flex; flex-direction:column; gap:0.5rem; }
.up-item:hover { background-color: rgba(249,249,249,0.04); }

.up-logout { text-align:center; margin-top:0.5rem; }
.up-logout a { color: #60a5fa; text-decoration:none; font-weight:600; }

.up-item { 
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.75rem 0.75rem;
    padding-inline: 1.75rem;
    background-color: rgba(249, 249, 249, 0.06);
    border-radius:1.25rem;
    font-weight: 700;
    text-decoration:none;
    color:var(--text);
    backdrop-filter: blur(92.5px);
    box-shadow: 0px 0px 35.6px 4px rgba(16, 24, 32, 0.08);

 }
    
 .up-arrow { 
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 400;
 }

@media (max-width: 900px) {
    .up-content {
         transform-origin: left top;
        right: unset; 
        left: 3%;
         top: 70px; 
         transform: scale(0.65)
          translateY(-10px);
         }
}

/* Larger viewports: increase dimensions for readability on very large screens */
@media (min-width: 2250px) {
    .up-content {
        width: 520px;
        padding: 1.25rem;
        border-radius: 2.2rem;
        box-shadow: 0px 0px 70px -12px rgba(0, 102, 146, 0.12);
    }
    .up-item { 
        padding-inline: 2.25rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-size: 1.05rem;
    }
    .up-header h3 { font-size: 1.125rem; }
}

@media (min-width: 3150px) {
    .up-content {
        width: 800px;
        padding: 1.5rem;
        border-radius: 2.6rem;
        box-shadow: 0px 0px 90px -16px rgba(0, 102, 146, 0.14);
    }
    .up-item { 
        padding-inline: 2.75rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        font-size: 1.125rem;
    }
    .up-header h3 { font-size: 1.25rem; }
}