* { margin: 0; padding: 0; box-sizing: border-box; }
body {overflow: hidden; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; background-color: #ffffff; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif; }
#audio { display: none; }
h2 {font-size: 16px;color:#485460;margin: 16px 0 10px 0;font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif;}
button {outline: 0;border: 0;cursor: pointer;-webkit-tap-highlight-color: transparent;font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif;}

.content { padding: 10px; height: calc(100vh - 141px); overflow-y: auto;-webkit-tap-highlight-color: transparent;}
.hidden { display: none; }

.bottom { position: fixed; bottom: 0; left: 0; width: 100%; background: #1e272e; height: fit-content; box-shadow: 0 0 6px rgb(0 0 0 / 22%); }
.tab-bar { display: flex; justify-content: space-around; align-items: center; }
.tab { flex: 1; text-align: center; padding: 20px 0 40px 0; cursor: pointer; font-size: 14px; color: #808e9b; transition: color 0.3s ease, font-weight 0.3s ease; }
.tab.active { color: #d2dae2; }
.player { display: flex; padding: 10px; align-items: center; transition: transform 0.01s ease; box-shadow: inset 0 0 6px rgb(0 0 0 / 22%); }
.player .progress { width: 0; height: 60px; position: fixed; bottom: 101px; left: 0; transition: width 0.3s ease, background-color 0.3s ease; background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0, 0, 0, 0.8267682072829132) 0%, rgb(255 255 255 / 12%) 97%, rgb(255 255 255 / 24%) 100%); }
.player .cover { width: 50px; height: 50px; background: #483924; margin-right: 10px; background-size: 50px; z-index: 9; box-shadow: 0 0 6px rgb(0 0 0 / 22%); }
.player .info { flex: 1; z-index: 9; text-shadow: 0 0 6px rgb(0 0 0 / 78%); }
.player .heart-icon { font-size: 20px; color: #ff4757; margin-right: 10px; cursor: pointer; transition: color 0.3s ease; }

.music { display: flex; align-items: center; margin: 0 -10px 0 -10px; padding: 5px 10px; cursor: pointer; position: relative;}
.music .title { color: #1e272e; }
.music .artist { color: #485460; }
.music .controls {height: 20px;margin-right: 10px;}
.cover { width: 50px; height: 50px; background: #483924; border-radius: 10px; margin-right: 10px; background-size: 50px; position: relative;overflow: hidden;}
.info { flex: 1; }
.title { font-weight: bold; max-width: 60vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: #d2dae2; }
.artist { font-size: 14px; max-width: 60vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #808e9b; }
.control-button {
    border: 0;
    background: none;
    font-size: 20px;
    color: #d2dae2;
    cursor: pointer;}
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    opacity: 0; /* Прозрачная по умолчанию */
    transition: opacity 0.3s ease;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Прозрачный по умолчанию */
    transition: background-color 0.3s ease; /* Плавное затемнение */
}
.music:hover .play-icon {
    opacity: 1;
}
.music:hover .overlay {
    background-color: rgb(0 0 0 / 70%); /* Затемняем обложку при наведении */
}
.collections_list {display: flex;justify-content: space-between;flex-wrap: wrap;}
.collection {width: 48%;margin-bottom: 20px;text-align: center;}
.collection .cover {width: 100%;background-color: lightgray;height: 80px;margin-bottom: 12px;}
.collection .info .name {font-size: 12px; font-weight: bold;}
.show-more-button {padding: 12px;font-weight: bold;margin-top: 8px;width: -webkit-fill-available;font-weight: bold;font-size: 12px;border-radius: 10px;color: #1e272e;
    border: 1px solid #1e272e;
    background: none;}


#search_input { padding: 10px; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif; outline: 0; border-radius: 10px; border: 0; font-size: 14px; width: -webkit-fill-available; box-shadow: 0 0 6px rgb(0 0 0 / 22%); }

.play_ai_music {position: relative;background: #000;height: 100px;overflow: hidden;border-radius: 10px;cursor: pointer;display: flex; /* Используем flexbox для кнопки и текста */align-items: center; /* Центрируем по вертикали */justify-content: center; /* Центрируем текст и кнопку вместе */}
.play_ai_music .star {position: absolute;background-color: #fff;border-radius: 50%;opacity: 0.8;box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.6);animation: moveStar linear infinite;}
@keyframes moveStar {from {transform: translateY(0px);} to {transform: translateY(100vh);}}
.play_ai_music .play_button {font-size: 28px;color: #fff;margin-right: 20px;cursor: pointer;z-index: 2; /* Устанавливаем z-index, чтобы кнопка была поверх звезд */}
.play_ai_music .text {color: #808e9b;font-size: 10px;text-align: left;z-index: 2;text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);}
.play_ai_music .text b {color: #d2dae2;font-size: 16px;}