/* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 全局样式 */
        body {

            background-color: #FAFAFA; /* neutral */
            color: #333333; /* dark */
            line-height: 1.6;
        }

        /* 容器样式 - 精准还原Tailwind的container */
        .container {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem; /* px-4 */
            padding-right: 1rem;
        }

        @media (min-width: 640px) { /* sm */
            .container {
                max-width: 640px;
            }
        }

        @media (min-width: 768px) { /* md */
            .container {
                max-width: 768px;
            }
        }

        @media (min-width: 1024px) { /* lg */
            .container {
                max-width: 1024px;
            }
        }

        @media (min-width: 1280px) { /* xl */
            .container {
                max-width: 1280px;
            }
        }

        /* 颜色变量 - 完全还原原Tailwind配置 */
        :root {
            --color-primary: #4A90E2; /* 主色调：清新浅蓝 */
            --color-secondary: #E8F4F8; /* 辅助色：浅蓝背景 */
            --color-neutral: #FAFAFA; /* 中性色：米白 */
            --color-dark: #333333; /* 深色文字 */
            --color-light: #888888; /* 浅色文字 */
            --color-white: #FFFFFF;
            --color-gray-200: #E5E7EB;
            --color-gray-400: #9CA3AF;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --transition-default: all 0.3s ease;
            --transition-fast: all 0.2s ease;
        }

        /* 工具类 - 保留所有非导航相关工具类 */
        .text-center { text-align: center; }
        .text-left { text-align: left; }
        .text-right { text-align: right; }

        .font-bold { font-weight: 700; }
        .font-semibold { font-weight: 600; }
        .font-medium { font-weight: 500; }

        .text-xs { font-size: 1.3rem; line-height: 1rem; }
        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
        .text-base { font-size: 1rem; line-height: 1.5rem; }
        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .text-2xl { font-size: 1.5rem; line-height: 2rem; }
        .text-3xl { font-size: 2rem; line-height: 2.25rem; }
        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

        .mb-2 { margin-bottom: 0.5rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-8 { margin-bottom: 2rem; }
        .mt-0 { margin-top: 0; }

        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
        .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
        .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
        .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
        .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
        .py-24 { padding-top: 6rem; padding-bottom: 6rem; }

        .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
        .pl-10 { padding-left: 2.5rem; }
        .pr-4 { padding-right: 1rem; }

        .gap-2 { gap: 0.5rem; }
        .gap-4 { gap: 1rem; }
        .gap-6 { gap: 1.5rem; }

        .w-full { width: 100%; }
        .min-w-\[200px\] { min-width: 200px; }
        .max-w-2xl { max-width: 42rem; }
        .max-w-3xl { max-width: 48rem; }

        .flex { display: flex; }
        .inline-flex { display: inline-flex; }
        .block { display: block; }
        .hidden { display: none; }

        .flex-col { flex-direction: column; }
        .justify-between { justify-content: space-between; }
        .justify-center { justify-content: center; }
        .items-center { align-items: center; }
        .items-start { align-items: flex-start; }
        .flex-1 { flex: 1 1 0%; }
        .flex-wrap { flex-wrap: wrap; }

        .relative { position: relative; }
        .absolute { position: absolute; }
        .top-0 { top: 0; }
        .left-3 { left: 0.75rem; }
        .-translate-y-1\/2 { transform: translateY(+75%); }
        .-translate-y-1 { transform: translateY(-0.25rem); }

        .rounded { border-radius: 0.25rem; }
        .rounded-md { border-radius: 0.375rem; }
        .rounded-lg { border-radius: 0.5rem; }

        .border { border-width: 1px; }
        .border-gray-200 { border-color: var(--color-gray-200); }

        .bg-white { background-color: var(--color-white); }
        .bg-dark { background-color: var(--color-dark); }
        .bg-primary { background-color: var(--color-primary); }
        .bg-secondary { background-color: var(--color-secondary); }
        .bg-neutral { background-color: var(--color-neutral); }

        .text-dark { color: var(--color-dark); }
        .text-light { color: var(--color-light); }
        .text-primary { color: var(--color-primary); }
        .text-white { color: var(--color-white); }
        .text-gray-400 { color: var(--color-gray-400); }

        .shadow-sm { box-shadow: var(--shadow-sm); }
        .shadow-md { box-shadow: var(--shadow-md); }
        .shadow-lg { box-shadow: var(--shadow-lg); }

        /* 网格布局 */
        .grid {
            display: grid;
            gap: 1.5rem; /* gap-6 */
        }
        .grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        .col-span-full {
            grid-column: 1 / -1;
        }

        /* 响应式断点 */
        @media (min-width: 768px) { /* md */
            .md\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .md\:flex-row {
                flex-direction: row;
            }
            .md\:text-xl {
                font-size: 1.25rem;
                line-height: 1.75rem;
            }
            .md\:text-2xl {
                font-size: 1.5rem;
                line-height: 2rem;
            }
            .md\:text-3xl {
                font-size: 1.875rem;
                line-height: 2.25rem;
            }
            .md\:text-4xl {
                font-size: 2.25rem;
                line-height: 2.5rem;
            }
            .md\:py-16 {
                padding-top: 4rem;
                padding-bottom: 4rem;
            }
            
            .md\:w-auto {
                width: auto;
            }
            .md\:flex {
                display: flex;
            }
            .md\:hidden {
                display: none;
            }
            .md\:items-center {
                align-items: center;
            }
        }

        @media (min-width: 1024px) { /* lg */
            .lg\:grid-cols-3 {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        /* 输入框样式 */
        #searchInput {
            width: 100%;
            padding: 0.5rem 1rem 0.5rem 2.5rem;
            border: 1px solid var(--color-gray-200);
            border-radius: 0.375rem;
            font-size: 1rem;
            line-height: 1.5;
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        #searchInput:focus {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3);
        }

        /* 筛选按钮样式 */
        .filter-btn {
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        .filter-btn.bg-primary {
            background-color: var(--color-primary);
            color: var(--color-white);
        }
        .filter-btn.bg-white {
            background-color: var(--color-white);
            border: 1px solid var(--color-gray-200);
            color: var(--color-dark);
        }

        /* 谱子卡片样式 */
        .score-card {
            background-color: var(--color-white);
            border-radius: 0.5rem;
            box-shadow: var(--shadow-sm);
            padding: 1.5rem;
            transition: all 0.3s ease;
        }
        .score-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-0.25rem);
        }
        .score-card .instrument-tag {
            background-color: var(--color-secondary);
            color: var(--color-primary);
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.875rem;
            font-weight: 500;
        }
        .score-card .score-meta {
            margin-bottom: 1.5rem;
            color: var(--color-light);
            font-size: 0.875rem;
            line-height: 1.5;
        }
        .score-card .score-meta p {
            margin-bottom: 0.5rem;
        }
        .score-card .score-meta i {
            margin-right: 0.5rem;
        }

        /* 下载按钮样式 */
        .download-btn {
            display: block;
            width: 100%;
            background-color: var(--color-primary);
            color: var(--color-white);
            text-align: center;
            padding: 0.5rem 0;
            border-radius: 0.375rem;
            text-decoration: none;
            font-weight: 500;
            transition: background-color 0.2s ease;
        }
        .download-btn:hover {
            background-color: rgba(74, 144, 226, 0.9);
            text-decoration: none;
        }

        /* 链接样式 */
        a {
            text-decoration: none;
            color: inherit;
        }
        a:hover {
            text-decoration: underline;
        }
        .contact-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--color-primary);
        }
        .contact-link:hover {
            text-decoration: underline;
        }

        /* 无结果提示样式 */
        .no-results {
            grid-column: 1 / -1;
            text-align: center;
            padding: 3rem 0;
        }
        .no-results i {
            font-size: 2.5rem;
            color: var(--color-light);
            margin-bottom: 1rem;
        }
        .no-results p {
            color: var(--color-light);
            font-size: 1rem;
        }
        /* 卡片图标样式 */
        .icon-item i {
        color: #4A90E2; /* 浅蓝色，与主色调保持一致 */
        width: 16px;
        height: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        }