/* ==================== CONTENT AREA ==================== */
			
			.two-col {
			    display: grid;
			    grid-template-columns: 1fr;
			    gap: 1rem;
			}

			.al-ord {
			    width: 100%;
			    display: flex;
			    flex-direction: column;
			    gap: 0.75rem;
			}

			/* ==================== ACCORDION STYLES ==================== */
			.rem{
			   
  padding: 1rem auto;
  border:1px solid green;
			}
			.accordion {
			    /*border: 1.5px solid var(--prime-border);*/
			    /*border-radius: var(--radius-lg);*/
			    overflow: hidden;
			    /*background: white;*/
			    transition: all var(--transition);
			     /*padding: .25rem 6rem .25rem .5rem;*/
			     padding: 0;        /* reset any UA padding */
  margin: 0 auto;
 width: clamp(345px, 85%, 550px);
 
			}
			details.accordion[open] {
			    background: inherit; /* no red, no shadow */
  box-shadow: none;    /* kill any shadow */
  outline: none;  
			}
.accordion:first-child {
  margin-top:1rem;
}
.accordion:last-child {
    margin-bottom:1rem;
}    
			.accordion summary {
			    display: flex;
			    align-items: center;
			    /*padding: .25rem .5rem .25rem .5rem;*/
			    /*background: blue;*/
			    color: var(--text-primary);
			    font-weight: 600;
			    /*cursor: pointer;*/
			    border: none;
			    transition: all var(--transition);
			    user-select: none;
			    position: relative;
			    border: 1px solid blue;
			    /*margin:0;*/
			    
			    
			     padding: 0.6rem 1rem;
			        font-size: 0.95rem;
			}

			.accordion summary:hover {
			    background: var(--prime-hover);
			}

			.accordion[open] summary {
			    /*background: var(--prime-solid);*/
			    /*background: red;*/
			    /*color: white;*/
			}

			.accordion summary::marker {
			    content: '';
			}

			.accordion summary::after {
			    content: '\f358';
			    font-family: 'Font Awesome 6 Free';
			    font-weight: 900;
			    position: relative;
			    right: -.15rem;
			    font-size: 1.1rem;
			    transition: transform var(--transition);
			    color: var(--accent-color);
			}

			.accordion[open] summary::after {
			    transform: rotate(180deg);
			}

			.album-meta {
			    position:relative;
			    display: flex;
			    align-items: center;
			    justify-content: flex-start;   /* push content to the left */
                /*flex: 1;*/
			    gap: 0.25rem;
			    /*flex: 1;*/
			    min-width: 0;
			    border:1px solid red;
			    /*justify-content: start;*/
			    margin-right: auto;
			    left:2.5rem;
			    
			}

			.album-icon {
			    font-size: 1rem;
			    flex-shrink: 0;
			}

			.album-title1 {
			    flex: 1;
			    min-width: 0;
			}

			.album-name {
			    font-size: 1rem;
			    font-weight: 600;
			    color: inherit;
			    white-space: nowrap;           /* prevent wrapping */
  overflow: hidden;              /* hide overflow */
  text-overflow: ellipsis;       /* show ... when cut */
			}

			.song-badge {
			    min-width: 1.5rem;
			    padding: 0.05rem 0.2rem;
			    border-radius: 99px;
			    background: var(--prime-yellow);
			    color: var(--text-primary);
			    font-size: 0.5rem;
			    font-weight: 700;
			    display: inline-flex;
			    align-items: center;
			    justify-content: center;
			    flex-shrink: 0;
			    /*margin-right:5rem;*/
			}

			.img-link {
			    position:absolute;
			    /*flex: 0 0 35px;*/
			    width: 35px;
			    height: 35px;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    flex-shrink: 0;
			    left:.5rem;
			}

			.img-link img,
			.img-link a {
			    width: 100%;
			    height: 100%;
			    border-radius: calc(var(--radius-sm) + 2px);
			    object-fit: cover;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			}

			.img-link a {
			    text-decoration: none;
			}

			/* ==================== SONG LIST ==================== */
			
			.art-ul {
			    list-style: none;
			    padding: .5rem .5rem .15rem .05rem;
			    /*background: var(--surface);*/
	/*		   margin: 0 auto;*/
 /*width: clamp(350px, 85%, 550px);*/
			    /*border-top: 1.5px solid var(--prime-border);*/
			}

			.art-a {
			    display: flex;
			    align-items: center;
			    padding: 0.15rem 0.75rem .15rem .5rem;
			    margin-bottom: 0.5rem;
			    background: white;
			    border: 1px solid var(--prime-border);
			    border-radius: var(--radius-sm);
			    font-size: 0.85rem;
			    font-weight: 500;
			    color: var(--text-primary);
			    transition: all var(--transition);
			}

			.art-a:last-child {
			    margin-bottom: 0;
			}

			.art-a:hover {
			    background: var(--prime-hover);
			    border-color: var(--prime-solid);
			    transform: translateX(4px);
			}

			.art-a i {
			    margin-right: 0.6rem;
			    color: var(--accent-color);
			    font-size: 0.9rem;
			    flex-shrink: 0;
			}

			.av {
			    color: var(--text-primary);
			    text-decoration: none;
			    flex: 1;
			    min-width: 0;
			    word-break: break-word;
			}

			.av:hover {
			    color: var(--accent);
			    text-decoration: underline;
			}

			.sub {
			    font-size: 0.8rem;
			    color: var(--text-muted);
			    flex-shrink: 0;
			    margin-left: 0.5rem;
			}

			/* ==================== SONG-WISE VIEW ==================== */
			
			.song-list {
			    display: flex;
			    flex-direction: column;
			    gap: 0.5rem;
			     margin: 0 auto;
 width: clamp(345px, 80%, 650px);
 padding: 1rem .05rem 1rem .5rem;
			}

			.song-item {
			    display: flex;
			    align-items: center;
			    gap: .5rem;
			     padding: 0.15rem .05rem;
			    background: white;
			    border: 1.5px solid var(--prime-border);
			    border-radius: var(--radius-lg);
			    transition: all var(--transition);
			    height: 35px;
			}

			.song-item:hover {
			    background: var(--surface-hover);
			    border-color: var(--prime-solid);
			    box-shadow: var(--shadow-sm);
			}

			.song-info {
			    flex: 1;
			   display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    /*background: rgba(0, 128, 128, .05);*/
	    background: red;
	    margin-left: 1px;
	    margin-right: 1px;
	    padding-right: 1px;
	    align-items: center;
	    text-transform: capitalize;
	    border-radius: 0;
	    overflow:hidden;
			}

			.song-title {
			    font-weight: 600;
			    color: var(--text-primary);
			    font-size: clamp(0.9rem, 2vw, 1.1rem);
			    /*margin-bottom: 0.25rem;*/
			    white-space: nowrap;           /* prevent wrapping */
  overflow: hidden;              /* hide overflow */
  text-overflow: ellipsis;       /* show ... when cut */
  /*border:1px solid blue;*/
   width: clamp(150px, 80%, 300px);
  text-transform:capitalize;
			}

			.song-meta {
			    font-size: 0.75rem;
			    color: var(--text-muted);
			     white-space: nowrap;           /* prevent wrapping */
  overflow: hidden;              /* hide overflow */
  text-overflow: ellipsis;       /* show ... when cut */
   width: clamp(30px, 40%, 150px);
   text-align:right;
   border:1px solid green;
   padding-right:5px;
			}

			.song-albums {
			    display: flex;
			    gap: 0.5rem;
			    align-items: center;
			    flex-wrap: wrap;
			    flex-shrink: 0;
			}

			.album-thumbnail {
			    position: relative;
			    width: 40px;
			    height: 40px;
			    border-radius: var(--radius-md);
			    overflow: hidden;
			    flex-shrink: 0;
			    border: 1px solid var(--prime-border);
			    transition: all var(--transition);
			}

			.album-thumbnail:hover {
			    transform: scale(1.1);
			    box-shadow: var(--shadow-md);
			}

			.album-thumbnail img {
			    width: 100%;
			    height: 100%;
			    object-fit: cover;
			}

			.album-thumbnail a {
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    width: 100%;
			    height: 100%;
			    text-decoration: none;
			}

			.album-icon-badge {
			    position: absolute;
			    bottom: 4px;
			    left: 4px;
			    font-size: 0.35rem;
			    /*background: white;*/
			    border-radius: 50%;
			    width: 10px;
			    height: 10px;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    /*border: 1px solid var(--prime-border);*/
			}

			/* ==================== HIGHLIGHT ==================== */
			 .inactive-song {
    color: var(--text-muted);
    pointer-events: none;
    font-size: clamp(0.85rem, 2vw, 1rem);
    text-transform: capitalize;
}
			.highlight {
			    background-color: #ffd700;
			    color: #333;
			    font-weight: 700;
			    padding: 0;
			    border-radius: 0;
			}

			/* ==================== NO RESULTS ==================== */
			
			.no-results {
			    padding: .5rem .45rem;
			    text-align: center;
			    color: var(--text-muted);
			    font-size: 1rem;
			    background: var(--surface);
			    border-radius: var(--radius-lg);
			    border: 1px dashed var(--prime-border);
			}

			.no-results i {
			    display: block;
			    font-size: 1rem;
			    margin-bottom: .25rem;
			    color: var(--text-secondary);
			    opacity: 0.5;
			}

			.no-results p {
			    margin: 0;
			    color: var(--text-secondary);
			}
           
			/* ==================== HIDDEN ELEMENTS ==================== */
			
			.accordion.hidden {
			    display: none;
			}

			.art-a.hidden {
			    display: none;
			}

			.song-item.hidden {
			    display: none;
			}

			/* ==================== RESPONSIVE ==================== */
			
			@media (min-width: 1200px) {
			    .two-col {
			        grid-template-columns: 2fr 1fr;
			        gap: 1rem;
			        align-items: start;
			    }

			    .filter-controls {
			        flex-direction: row;
			        align-items: center;
			    }

			    .control-group {
			        flex-wrap: nowrap;
			    }
			}

			@media (max-width: 640px) {
			    .search-controls {
			        padding: 1rem;
			    }

			    .sort-opt {
			        padding: 0.4rem 0.8rem;
			        font-size: 0.8rem;
			    }

			    /*.accordion summary {*/
			    /*    padding: 0.6rem 1rem;*/
			    /*    font-size: 0.95rem;*/
			    /*}*/

			    /*.song-item {*/
			    /*    padding: 0.75rem;*/
			    /*    gap: 0.75rem;*/
			    /*}*/
			}
			.left{
				border: 1px solid red;
				 background: linear-gradient(
    to right,
    rgba(180, 205, 255, 0.65) 0%,
    #fff7ed 40%,
    #fff7ed 60%,
    rgba(180, 205, 255, 0.65) 100%
  );
			}
			.right{
				border: 1px solid blue;
				height: 100%;
				background: linear-gradient(
    to right,
    rgba(180, 205, 255, 0.65) 0%,
    #fff7ed 40%,
    #fff7ed 60%,
    rgba(180, 205, 255, 0.65) 100%
  );
			}