@media only screen and (max-width:767px) {

/***** 1. VARIABLES & THEME CONFIG ****/
:root {
	--selectedgradient: linear-gradient(-45deg, var(--bg-muted), #EDF6FF);
}

/***** 2. GENERAL ****/
.mobile {display: block;}
.nomobile {display: none;}
.main {width: 100%;}
.content {padding: 0 20px; max-width: none; width: 100%; box-sizing: border-box}
a img:hover {transform: none;}
h1 {font-size: 30px; line-height: 40px; margin-bottom: 0}


/***** 3. GRIDS ****/
.main-grid ul {grid-template-columns: repeat(3, 1fr)}
.main-grid li img {width: 80%}
.main-grid li {line-height: 18px; font-size: 15px}


/***** 4. SIDEBAR & NAV ****/
.sidebar {width: 100%;}
nav {margin-top: 10px; padding-bottom: 0; border-bottom: none; margin-bottom: 0;}
nav ul {margin-bottom: 0; padding-top: 0;}
nav li:last-child {margin-bottom: 20px}
.music-logo {margin: 0;}
.music-logo img {height: 40px;}
.mobilenav {padding: 20px 30px; box-sizing: border-box; background: var(--bg-muted); position: relative; z-index: 200;}
.mobilenav button {float: right; position: absolute; top: 15px; right: 0; padding: 20px 30px;}
.mobilenav h1 {line-height: 22px; margin-bottom: 0}
.mobilenav a:hover {text-decoration: none;}
.collapsible {cursor: pointer; border: none; background: none; outline: none;}
.collapsible .icon-menu {display: block;}
.collapsible .icon-close {display: none;}
.collapsible.active .icon-menu {display: none;}
.collapsible.active .icon-close {display: block;}
.navcontent {max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; position: absolute; top: 100%; left: 0; width: 100%; background: var(--bg-muted); z-index: 100; padding: 0 30px; box-sizing: border-box;}


/***** 5. HEADER & SEARCH ****/
header {margin-bottom: 10px; border-bottom: none;}
.searchforms {min-width: 0; width: 100%;}
.search-header {width: 100%;}
.tagresults ul {grid-template-columns: 1fr 1fr 1fr; gap: 16px;}
.tagresults li {font-size: 13px}
.tagresults img {margin-bottom: 0}
.search-hero-artist h2 {line-height: 32px; margin-bottom: 5px}
.hero-bio {display: none}


/***** 6. HOME ****/
.musicwall {height: 200px; margin-bottom: 20px; padding-top: 55px}
.musicwall img {height: 110px; border: 2px solid var(--white); margin-top: 0;}
.stats {width: 100%; margin-top: -50px; margin-bottom: 20px}
.stats ul {grid-template-columns: 1fr; padding-bottom: 0; margin-bottom: 15px}
.stats li {margin-bottom: 20px; display: flex; align-items: center; box-sizing: border-box; border-right: none; text-align: left; line-height: 25px; font-weight: 600; font-size: 17px}
.stats li img {margin-right: 10px; margin-top: 0; height: 25px}
.stats li br {display: none}
.stats .count {font-size: 20px; text-transform: none}
.home .latest.main-grid ul {grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 0;}
.home .latest.main-grid li {border-bottom: none; text-align: center; padding: 0; margin-bottom: 5px; line-height: 22px}
.home .latest.main-grid li img {width: 100%; margin: 0; margin-bottom: 10px;}
.latest.main-grid ul {grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 0;}
.latest.main-grid li {border-bottom: none; text-align: center; padding: 0; margin-bottom: 5px; line-height: 22px}
.latest.main-grid li img {width: 100%; margin: 0; margin-bottom: 10px;}
.top-artists.main-grid ul {gap: 16px}
.top-artists.main-grid li img {margin-right: 0}
.top-artists {margin-bottom: 20px}
.button {padding: 10px 25px}


/***** 7. ARTISTS & ALBUMS ****/
.sorting-options label {font-size: 15px}
.sorting-options select {width: 100%; margin-top: 5px}
.page-album-tracklisting .meta img {margin-top: 0}
.page-album-tracklisting .count {text-align: center}
.page-album-tracklisting h1 {text-align: center}
.pagination {gap: 4px; margin: 30px 0 30px 0}
.pagination .page-numbers {min-width: 34px; height: 36px; padding: 0 6px; font-size: 14px;}
.pagination .page-numbers svg {width: 16px; height: 16px;}
.page-albums .main-grid ul {grid-template-columns: 1fr; gap: 0px}
.page-albums .main-grid li {border-bottom: 1px solid var(--divider); width: 100%; text-align: left; padding: 15px 0;}
.page-albums .main-grid li:first-child {padding-top: 0;}
.page-albums .main-grid li:last-child {border-bottom: none; margin-bottom: 0;}
.page-albums .main-grid li img {width: 60px; height: auto; margin-right: 0; margin-bottom: 0; border-radius: 4px;}
.page-albums .artist-card {display: flex; align-items: center; gap: 20px;}


/***** 8. SINGLE SONG ****/
.single-post header {position: sticky; -webkit-backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.7); padding-left: 0; left: 0; width: auto; z-index: 90;}
.songdetails {padding: 20px; background: none !important; margin-top: -20px; padding-top: 0; padding-bottom: 0; margin-bottom: 0;}
.blackoverlay {padding: 0; background: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--divider); margin-bottom: 20px;}
.blackoverlay .content {display: initial;}
.albumart {margin-right: 0;}
.albumart img {width: 100%; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); margin-bottom: 15px;}
.songcontent, .songcontent a, .songcontent h1 {color: var(--text);}
.songcontent {text-align: center;}
.songcontent h1 {line-height: 42px; margin-bottom: 5px;}
.songartist {margin-bottom: 20px; border-bottom: 1px solid var(--divider); padding-bottom: 10px;}
.featured {display: flex; flex-direction: column; align-items: center; margin-top: 0; text-align: center; gap: 10px}
.featuredtext {width: 100%; font-size: 22px; line-height: 26px; margin-top: 5px;}
.featuredimg {margin: auto; height: auto; width: 50%; margin-bottom: 10px}
.query {margin-right: 10px; padding: 10px 30px}
.query span {display: none;}
.query img {margin-top: 0; height: 22px; margin-right: 0}
.search-web {gap: 0; display: block}
.search-web .query:last-child {margin-right: 0}
.single .artist-col-img img {width: 50px}
.mb-artist-bio {font-size: 15px; line-height: 22px}
.artist-layout-flex {gap: 12px}
.youtube-facade .play-button {width: 75px; height: 75px;}
.youtube-facade .play-button::after {width: 35px; height: 35px}
.genre-links li a {background: var(--bg-muted); color: var(--text)}
.meta-grid {display: flex; flex-wrap: wrap; gap: 20px; align-items: center;}
.meta-grid .meta {margin: 0 !important; width: auto !important; flex: 0 0 auto !important;}
.meta {text-align: left}
@keyframes shootOutPill {0% {max-width: 84px;} 100% {max-width: none}}


/***** 10. TAGS & ARTISTS ****/
.tag .songdetails {margin-bottom: 0px;}
.tag .songcontent {text-align: center; font-size: 15px; line-height: 22px;}
.tag .songcontent p {text-align: left;}
.tag .songcontent .count {color: var(--text);}
.tag .count {font-size: 13px;}
.tag .artistart {text-align: center; margin-right: 0;}
.tag .artistart img {height: 200px; width: auto; margin-bottom: 10px;}
.artist-about img {width: 75px;}
.topartistwrap {width: 100%; margin-bottom: 10px; margin-top: 15px;}
.tag .topartist {margin: auto; margin-top: 10px;}
.topartist {box-shadow: none;}
.associated-artists {margin-bottom: 20px;}
.associated-artists ul {grid-template-columns: repeat(3, 1fr)}
.associated-artists img {width: 90%}
.associated-artists-grid.main-grid ul {gap: 16px}
.associated-artists-grid.main-grid li:first-child {padding-top: 15px}
.tag .blackoverlay {padding-top: 60px}
.tag-list-row {align-items: start; gap: 12px}
.tag-image img {width: 50px}


/***** 11. SEARCH RESULTS & LISTS ****/
.results ul {grid-template-columns: 1fr; gap: 24px;}
.results .meta img {margin-top: 0;}
.search-hero-artist img {width: 75px}
.search-hero-artist {width: 100%; box-sizing: border-box}


/***** 12. LIBRARY / MISSING / PLAYLIST ANALYZER ****/

/* --- 1. MISSING TABLE --- */
#missing thead {display: none;}
#missing tbody tr {display: grid; grid-template-columns: 60px 1fr 40px; grid-template-rows: auto auto; gap: 0 10px; padding: 15px 0; border-bottom: 1px solid var(--divider); align-items: center; min-height: 72px;}
#missing tbody tr:last-child {border-bottom: none;}
#missing td:nth-child(1) {grid-column: 1; grid-row: 1 / span 2; width: auto !important; padding: 0 !important; border: none !important; display: flex; align-items: center; justify-content: center;}
#missing td:nth-child(1) img {width: 50px; height: 50px; object-fit: cover; border-radius: 4px; display: block; box-shadow: none; margin: 0;}
#missing td:nth-child(2) {grid-column: 2; grid-row: 1; width: auto !important; padding: 0 !important; border: none !important; align-self: end; font-weight: 500; line-height: 1.3; margin-bottom: 2px;}
#missing td:nth-child(3) {grid-column: 2; grid-row: 2; width: auto !important; padding: 0 !important; border: none !important; font-size: 15px; align-self: start; line-height: 1.3; color: var(--text-secondary);}
#missing td:nth-child(3) a {color: var(--text-secondary);}
#missing td:nth-child(4), #missing td:nth-child(5) {display: none !important;}
#missing td.mobile-actions {grid-column: 3; grid-row: 1 / span 2; display: flex !important; align-items: center; justify-content: center; border: none !important; padding: 0 !important; height: 100%;}

/* --- 2. PLAYLIST ANALYZER TABLE (#tbl) --- */
#tbl thead {display: none;}
#tbl tbody tr {display: grid; grid-template-columns: 60px 1fr 40px; grid-template-rows: auto auto; gap: 0 10px; padding: 15px 0; border-bottom: 1px solid var(--divider); align-items: center; min-height: 72px;}
#tbl td:nth-child(1) {display: none !important;}
#tbl td:nth-child(2) {grid-column: 1; grid-row: 1 / span 2; width: auto !important; padding: 0 !important; border: none !important; display: flex; align-items: center; justify-content: center;}
#tbl td:nth-child(2) img, #tbl .thumb-placeholder {width: 50px; height: 50px; object-fit: cover; border-radius: 4px; margin: 0;}
#tbl td:nth-child(3) {grid-column: 2; grid-row: 1; font-weight: 500; border: none !important; padding: 0 !important; align-self: end; line-height: 1.3; margin-bottom: 2px;}
#tbl td:nth-child(4) {grid-column: 2; grid-row: 2; font-size: 15px; color: var(--text-secondary); border: none !important; padding: 0 !important; align-self: start; line-height: 1.3;}
#tbl td:nth-child(4) a {color: var(--text-secondary);}
#tbl td:nth-child(5), #tbl td:nth-child(6), #tbl td:nth-child(7), #tbl td:nth-child(8), #tbl td:nth-child(9), #tbl td:nth-child(10) {display: none !important;}
#tbl td.mobile-actions {grid-column: 3; grid-row: 1 / span 2; display: flex !important; align-items: center; justify-content: center; border: none !important; padding: 0 !important; height: 100%;}
#tbl td:nth-child(2) .thumb-placeholder img {width: 20px; height: auto; border-radius: 0}
.toggle-wrapper {margin-top: 10px; margin-bottom: 20px}
.pl-grid {grid-template-columns: repeat(2, 1fr); gap: 16px}


/* --- 3. COMPLETE LIBRARY --- */
#btnExportCSV {display: none;}
.page-artists .library-filter-wrapper {margin: 0; margin-top: 20px}
.page-artists .library-controls {margin-bottom: 10px}
.page-complete .library-filter-wrapper {margin: 0;}
#playlist thead {display: none !important;}
#playlist tbody tr {display: grid !important; grid-template-columns: 55px 1fr 40px !important; grid-template-rows: auto auto !important; gap: 0 12px !important; padding: 15px 0 !important; border-bottom: 1px solid var(--divider) !important; align-items: center !important; min-height: 72px !important;}
#playlist td.library-img-col, #playlist td.data-image {grid-column: 1 !important; grid-row: 1 / span 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: none !important; width: 100% !important;}
#playlist td.library-img-col img {width: 50px !important; height: 50px !important; border-radius: 8px !important; margin: 0 !important; object-fit: cover !important;}
#playlist td.data-image img {width: 50px !important; height: 50px !important; border-radius: 8px !important; margin: 0 !important; object-fit: cover !important;}
#playlist td.data-title {grid-column: 2 !important; grid-row: 1 !important; width: auto !important; padding: 0 !important; border: none !important; align-self: end !important; font-weight: 500 !important; line-height: 1.3 !important; margin-bottom: 3px !important;}
#playlist td.data-artist-html {grid-column: 2 !important; grid-row: 2 !important; width: auto !important; padding: 0 !important; border: none !important; font-size: 15px !important; align-self: start !important; line-height: 1.3 !important;}
#playlist td.data-artist-html a {color: var(--text-secondary) !important;}
#playlist td.data-name-desc {grid-column: 2 !important; grid-row: 1 !important; width: auto !important; padding: 0 !important; border: none !important; align-self: end !important; margin-bottom: 2px !important;}
#playlist td.data-name-desc .data-name {margin-bottom: 0 !important; font-weight: 500 !important; font-size: 17px !important;}
#playlist td.data-name-desc .data-desc {display: none !important;}
#playlist td.data-count {display: block !important; grid-column: 2 !important; grid-row: 2 !important; width: auto !important; padding: 0 !important; border: none !important; align-self: start !important; font-size: 15px !important; color: var(--text-secondary) !important; line-height: 1.3 !important;}
#playlist td.data-count::after {content: " songs";}
#playlist td.mobile-actions {grid-column: 3 !important; grid-row: 1 / span 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; padding: 0 !important; height: 100% !important;}
#playlist td.data-album, #playlist td.data-year, #playlist td.data-duration, #playlist td.data-billboard, #playlist td.data-uk, .library-hidden {display: none !important;}
#sheet-bio {font-size: 17px; line-height: 28px; text-transform: none}


/* --- 4. ACTION SHEET (SHARED) --- */
#action-sheet-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); z-index: 9998; opacity: 0; visibility: hidden; transition: 0.3s;}
#action-sheet-overlay.active {opacity: 1; visibility: visible;}
#action-sheet {position: fixed; bottom: -100%; left: 0; width: 100%; background: color-mix(in srgb, var(--bg-muted) 90%, transparent); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(10px); z-index: 9999; border-radius: 24px 24px 0 0; padding: 24px; box-sizing: border-box; transition: bottom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); border-top: 1px solid rgba(255, 255, 255, 0.3); display: block; text-transform: capitalize}
#action-sheet.active {bottom: 0;}
#action-sheet h2 {font-size: 20px; line-height: 26px; margin-bottom: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--text); letter-spacing: normal; text-transform: none}
#action-sheet h3 {margin: 0; color: var(--text-secondary); font-weight: normal; font-size: 15px; line-height: normal}
#action-sheet ul {list-style: none; padding: 0; margin: 0;}
#action-sheet li {padding: 8px 0; display: flex; align-items: center;}
#action-sheet li:last-child {border-bottom: none;}
.sheet-label {width: 40px; display: flex; justify-content: flex-start;}
.sheet-label img {height: auto; width: 24px; margin-top: 7px}
#sheet-spotify-li .sheet-label img {margin-top: 0}
#action-sheet .sheet-value {font-weight: 500; text-align: left; flex-grow: 1;}
.sheet-header-layout {display: flex; align-items: center; margin-bottom: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--divider); padding-right: 40px}
.page-artists .sheet-header-layout img {height: 75px; width: auto; border-radius: 8px; margin-right: 10px}
.sheet-img-wrapper {width: 65px; height: 65px; flex-shrink: 0; margin-right: 15px; border-radius: 8px; overflow: hidden; background: var(--bg-muted);}
.sheet-img-wrapper img {width: 100%; height: 100%; object-fit: cover; display: block;}
.sheet-text-wrapper {flex-grow: 1; overflow: hidden; text-align: left;}
.close-sheet {position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; border-radius: 50%; background-color: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 100; transition: background-color 0.2s; user-select: none;}
.close-sheet img {width: 14px; height: auto;}
#sheet-spotify-li {border: 1px solid var(--black) !important; border-radius: 12px; margin-top: 15px; padding: 0 !important; overflow: hidden;}
#sheet-spotify-link {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 12px 0; text-decoration: none; color: inherit; gap: 10px;}
#sheet-spotify-link .sheet-label {width: auto; justify-content: center;}
#sheet-spotify-link .sheet-value {flex-grow: 0; text-align: center; width: auto;}
#sheet-genre {text-transform: capitalize;}
.mobile-actions button {cursor: pointer;}
.content button.btn-more {background:none; border:none; font-size:24px; color:var(--text-secondary); padding:0 10px;}
.col-actions {width: auto}


/***** 13. LATEST & GALLERY ****/
.page-latest .latest ul {grid-template-columns: repeat(auto-fill, minmax(100px, 100px)); gap: 20px; font-size: 12px; line-height: 16px;}
.title {text-align: center}
.title h1 {margin-bottom: 0}
.page-missing .title {text-align: left}


/***** 14. ARTWORK FINDER ****/
.artwork-search {width: 100%}
.page-artwork .main-grid ul {grid-template-columns: 1fr 1fr; gap: 20px}
.page-artwork .main-grid li {margin-bottom: 0; border-bottom: none; padding: 0}
.page-artwork .main-grid .artist-card img {width: 100%; margin-right: 0}
.search-group, .artwork-search {width: 100% !important; max-width: 100%; box-sizing: border-box;}
.clear-input-btn {padding: 0 15px !important;}
.largelink {margin-top: 0}
.search-group .divider {margin-left: 0}


/***** 15. PLAYLIST ANALYZER ****/
.page-spotify .toolbar button {margin-top: 10px}
#stats {display: none}
#actionButtons {display: none}
.filter-toolbar {margin-top: 10px}


/***** 16. STATS ****/
.stats-tabs-nav {display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;}
.stats-tabs-nav::-webkit-scrollbar {display: none;}
.content .tab-btn {flex: 0 0 auto; white-space: nowrap;}
.page-stats h1 {text-align: left}
.page-stats .main-grid li img {width: 75px; margin-right: 0; margin-bottom: 0; border-radius: 8px}
.stats-dashboard-grid {grid-template-columns: 1fr;}
.stats-dashboard-grid {grid-template-columns: repeat(1, 1fr)}

/***** 17. FOOTER ****/
.footer {margin-top: 10px;}
.footer ul {grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 10px; width: 100%;}


/***** 18. RESULTS (TEMP) ****/
.artist-banner {height: 300px}


/***** DARK THEME ****/
@media (prefers-color-scheme: dark) {
	:root {
	--selectedgradient: linear-gradient(-45deg, var(--bg-subtle), #16202C);
	}
	header {border-bottom: none;}
	.single-post header {background-color: rgba(0, 0, 0, 0.5);}
	.close-sheet {filter: invert(1)}
	.close-sheet img {opacity: 0.8}
	#action-sheet-overlay {background: rgba(0, 0, 0, 0.5)}
	#sheet-spotify-li {border: 1px solid var(--text) !important}
	#sheet-spotify-li img {filter: invert(1)}
}

}