body {
        font-family: system-ui, sans-serif;
        padding: 10px;
        margin-bottom: 130px;
        background: #f5f5f5;
    }
    .item {
        border: 2px solid transparent;
        background: white;
        padding: 14px;
        border-radius: 10px;
        margin-bottom: 10px;
        font-size: 1.1em;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .item.active {
        border-color: #1e90ff;
    }
    .item.isPin {
        background: #fff7d6;
    }
    .title {
        flex: 1;
        font-weight: bold;
        word-break: break-word;
    }
    .options-btn {
        cursor: pointer;
        background: none;
        border: none;
        font-size: 1.3em;
    }
        .dropdown {
            position: absolute;
            background: white;
            border: 1px solid #ccc;
            border-radius: 8px;
            display: none;
            flex-direction: column;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            min-width: 150px;
            z-index: 999;
            overflow: hidden;
        }
        .dropdown button {
            padding: 10px;
            border: none;
            background: white;
            cursor: pointer;
            text-align: left;
        }
        .dropdown button:hover {
            background: #eee;
        }
        #player-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 14px 20px 20px;
            background: #222;
            color: white;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 6px;
            box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.3);
        }
        #player-title {
            font-size: 1em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        audio {
            width: 100%;
        }
        #search {
			width: 100%;
			padding: 10px 36px 10px 10px; 
			font-size: 1em;
			border: 1px solid #ccc;
			border-radius: 6px;
			box-sizing: border-box;
		}
		#clear-search {
			position: absolute;
			right: 2px;
			top: 0;
			bottom: 0;
			margin: auto;
			height: 100%;
			aspect-ratio: 1;
			font-size: 1em;
			background: none;
			border: none;
			cursor: pointer;
			color: #888;
			display: none;
			align-items: center;
			justify-content: center;
		}
		.category-btn {
			padding: 6px 12px;
			margin-right: 6px;
			border: 1px solid #ccc;
			background: white;
			border-radius: 6px;
			cursor: pointer;
		}
		.category-btn.active {
			background: #1e90ff;
			color: white;
			border-color: #1e90ff;
		}
		.badge-new {
			display: inline-block;
			margin-left: 8px;
			padding: 2px 6px;
			font-size: 0.75em;
			font-weight: bold;
			color: white;
			background: red;
			border-radius: 6px;
			animation: blink 1s infinite;
		}
		@keyframes blink {
			0%, 50%, 100% { opacity: 1; }
			25%, 75% { opacity: 0; }
		}




        audio::-internal-media-controls-download-button {
    display: none;
}
audio::-webkit-media-controls-enclosure {
    overflow: hidden;
}
audio {
    pointer-events: auto;
}

/* Scroll to top button */
#btnTop {
  position: fixed;
  bottom: 70px;
  right: 10px;
  padding: 14px 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s, box-shadow .3s;
  z-index: 99999;
}