/* Glass card */
.glass-card {
    background: rgba(255,255,255,0.7);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 6px 20px rgba(20,20,40,0.08);
    border: 1px solid rgba(255,255,255,0.6);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}

/* Header */
.profile-head {
    display:flex;
    gap: .75rem;
    align-items: center;
}
.avatar-lg {
    width:64px;height:64px;border-radius:14px;overflow:hidden;display:inline-block;
    background:linear-gradient(135deg,#f6f8fa,#ffffff);box-shadow:0 3px 12px rgba(16,24,40,0.06);
    flex: 0 0 64px;
}
.avatar-lg img{width:100%;height:100%;object-fit:cover;display:block}

.username-block .name {font-weight:700;font-size:1.05rem}
.username-block .meta {font-size:.8rem;color:rgba(10,10,10,0.55)}

/* Row pills */
.info-pill {
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.6rem .8rem;
    border-radius:12px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(16,24,40,0.04);
    box-shadow: 0 1px 0 rgba(16,24,40,0.02) inset;
}

.info-pill .bi {font-size:1.1rem; color: rgba(16,24,40,0.6)}
.info-value {font-weight:600;color:rgba(10,10,10,0.9);font-size:.95rem}
.info-label {font-size:.72rem;color:rgba(10,10,10,0.45)}

/* Layout */
.profile-grid {display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:.9rem}
@media(min-width:720px){
.profile-grid {grid-template-columns: repeat(2, 1fr)}
}

/* pill row wrapper */
.pill-row {display:flex;justify-content:space-between;gap: .6rem}
.pill-content {flex:1;display:flex;gap:.75rem;align-items:center;min-width:0}
.pill-actions {flex:0 0 auto;display:flex;align-items:center;gap:.5rem}

/* small touches */
.btn-pill {border-radius:10px;padding:.28rem .6rem;font-size:.82rem}
.edit-form {display:none;margin-top:.6rem}
.edit-form.show {display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.small-note {font-size:.78rem;color:rgba(10,10,10,0.45)}

/* animations */
.fade-slide {
    transition: all .22s cubic-bezier(.2,.9,.3,1);
    transform-origin: top right;
    opacity:0; transform: translateY(-6px) scale(.995);
}
.fade-slide.show {opacity:1;transform:translateY(0) scale(1)}


/* Avatar hover and plus icon */
.avatar-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.avatar-wrapper:hover {
    transform: scale(1.05);
}
.avatar-plus {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #0d6efd;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}
.avatar-wrapper:hover .avatar-plus {
    background: #0b5ed7;
    transform: scale(1.2);
}

.form-control[type="file"] {
    cursor: pointer;
    background: rgba(255,255,255,0.9);
    border-radius: 8px;
    border: 1px solid rgba(16,24,40,0.1);
    transition: all 0.2s ease;
}

.form-control[type="file"]:hover {
    background: rgba(255,255,255,1);
    border-color: rgba(16,24,40,0.2);
}

/* Optional: hover effect on preview */
.glass-card img {
    transition: transform 0.2s ease;
}
.glass-card img:hover {
    transform: scale(1.05);
}

.settings-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Reuse pill-row design */
.pill-row + .pill-row {
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: .7rem;
}

/* Smooth show/hide for confirmation */
#delete-confirm.fade-slide {
  margin-top: .5rem;
}