body {
            background: linear-gradient(135deg, #f5f6fa 60%, #e0e7ff 100%);
            font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
        }
        .card {
            border-radius: 1.2rem;
            box-shadow: 0 4px 24px rgba(108,92,231,0.07), 0 1.5px 6px rgba(253,121,168,0.04);
            border: none;
            transition: box-shadow .25s;
        }
        .card:hover {
            box-shadow: 0 8px 32px rgba(108,92,231,0.13), 0 3px 12px rgba(253,121,168,0.08);
        }
        .cover-img {
            width: 100%;
            border-radius: 1.2rem 1.2rem 0 0;
            box-shadow: 0 2px 12px rgba(108,92,231,0.08);
        }
        .author-avatar, .anchor-avatar {
            width: 52px; height: 52px;
            border-radius: 50%;
            object-fit: cover;
            border: 2.5px solid #fff;
            box-shadow: 0 2px 8px rgba(108,92,231,0.08);
        }
        .anchor-avatar { width: 62px; height: 62px;}
        .chapter-item.active {
            background: linear-gradient(90deg,#e0e7ff 60%,#f5f6fa 100%);
            border-left: 4px solid #6c5ce7;
            font-weight: 600;
            color: #6c5ce7;
            box-shadow: 0 2px 8px rgba(108,92,231,0.06);
        }
        .chapter-item {
            cursor: pointer;
            transition: background .18s, color .18s;
            border-radius: 0.7rem;
            margin-bottom: 0.2rem;
        }
        .chapter-item:hover {
            background: #f3f0ff;
            color: #6c5ce7;
        }
        .audio-controls { gap: 1.2rem; }
        .audio-progress {
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            position: relative;
            margin-bottom: 0.5rem;
            box-shadow: 0 1px 4px rgba(108,92,231,0.04);
        }
        .audio-progress-bar {
            height: 100%;
            background: linear-gradient(90deg,#6c5ce7,#fd79a8 90%);
            border-radius: 4px;
            transition: width .2s;
        }
        .audio-time {
            font-size: 1em;
            color: #888;
            letter-spacing: 0.5px;
        }
        .badge-genre {
            background: linear-gradient(90deg,#6c5ce7,#fd79a8);
            color: #fff;
            font-weight: 500;
            letter-spacing: 0.5px;
        }
        .comment-avatar {
            width: 38px; height: 38px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #fff;
            box-shadow: 0 1px 4px rgba(108,92,231,0.07);
        }
        .list-group-item {
            border: none;
            border-bottom: 1px solid #f0f0f0;
            background: transparent;
        }
        .list-group-item:last-child { border-bottom: none;}
        .btn-gradient {
            background: linear-gradient(90deg,#6c5ce7,#fd79a8 90%);
            color: #fff;
            border: none;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(108,92,231,0.08);
            transition: background .2s, box-shadow .2s;
        }
        .btn-gradient:hover, .btn-gradient:focus {
            background: linear-gradient(90deg,#5e54c7,#e170a8 90%);
            color: #fff;
            box-shadow: 0 4px 16px rgba(108,92,231,0.13);
        }
        .section-title {
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: .7rem;
            letter-spacing: 0.5px;
        }
        .card-header {
            background: transparent;
            border: none;
        }
        .shadow-sm { box-shadow: 0 2px 8px rgba(108,92,231,0.06) !important; }
        .btn-outline-primary {
            border-radius: 1.2rem;
        }
        .btn-outline-primary:focus, .btn-outline-primary:hover {
            background: #f3f0ff;
            color: #6c5ce7;
            border-color: #6c5ce7;
        }
        .btn-sm { font-size: 0.98em;}
        .badge {
            border-radius: 0.7rem;
            font-size: 0.92em;
        }
        .list-group-flush .list-group-item {
            border-radius: 0.7rem;
            margin-bottom: 0.2rem;
        }
        .form-control:focus {
            border-color: #6c5ce7;
            box-shadow: 0 0 0 0.15rem rgba(108,92,231,.12);
        }
        .pagination {
            justify-content: center;
            margin-top: 1rem;
        }
        .pagination .page-link {
            border-radius: 0.7rem;
            color: #6c5ce7;
            border: none;
            margin: 0 2px;
        }
        .pagination .page-item.active .page-link {
            background: linear-gradient(90deg,#6c5ce7,#fd79a8 90%);
            color: #fff;
            border: none;
        }
        .pagination .page-link:focus {
            box-shadow: 0 0 0 0.15rem rgba(108,92,231,.12);
        }
        /* 歌词高亮 */
        #lyricList li.text-primary {
            font-weight: bold;
            background: #f3f0ff;
            border-radius: 0.5em;
        }
        @media (max-width: 991px) {
            .col-lg-3, .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
            .mb-lg-0 { margin-bottom: 1.5rem !important; }
        }
        @media (max-width: 575px) {
            .card { border-radius: 0.7rem; }
            .cover-img { border-radius: 0.7rem 0.7rem 0 0; }
            .author-avatar, .anchor-avatar { width: 44px; height: 44px;}
            .anchor-avatar { width: 52px; height: 52px;}
        }