I'll start by researching design systems and assets to inform this music sheet reader app design.Now let me get some more specific assets and design inspiration.Now I have enough context. Let me design this music sheet reader app with a dark red and black aesthetic. I'll create a stunning, fixed portrait-mode UI.Now I have enough context. Let me create the full HTML for this music sheet reader app.
```json
{
"summary": "设计了一款红黑色调的曲谱阅读器App UI界面。采用#8B0000酒红与#121212极致深灰黑为主色调，固定竖屏不可滚动。顶部状态栏含搜索按钮，主内容区分为两个Tab视图：'全部曲库'以手写字体展示歌曲索引列表，背景叠加了音乐五线谱纹理；'收藏曲库'以黑胶唱片+封面卡片形式展示收藏。底部导航栏三个按钮：全部曲库、导入加号按钮（圆形突出区分）、收藏曲库。整体采用复古黑胶唱片美学，搭配装饰艺术风格细节。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n <title>乐谱架 - 曲谱阅读器</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link href=\"https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+Xia…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <style>\n :root {\n --wine: #8B0000;\n --wine-light: #B22222;\n --wine-glow: #6B0000;\n --dark-bg: #121212;\n --dark-card: #1A1A1A;\n --dark-elevated: #222222;\n --dark-border: #2A2A2A;\n --gold: #C9A84C;\n --gold-light: #E8D48B;\n --text-primary: #F0E6D3;\n --text-secondary: #A89880;\n --text-muted: #6B5D4D;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n }\n\n html, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n background: var(--dark-bg);\n font-family: 'Cormorant Garamond', 'ZCOOL XiaoWei', serif;\n color: var(--text-primary);\n user-select: none;\n -webkit-user-select: none;\n }\n\n /* 固定竖屏容器 */\n .app-container {\n position: fixed;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 100%;\n max-width: 430px;\n height: 100vh;\n height: 100dvh;\n background: var(--dark-bg);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n box-shadow: 0 0 60px rgba(139, 0, 0, 0.15);\n }\n\n /* 背景纹理 - 五线谱 */\n .music-texture {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n opacity: 0.06;\n }\n\n .music-texture svg {\n width: 100%;\n height: 100%;\n }\n\n /* 顶部状态栏 */\n .status-bar {\n position: relative;\n z-index: 10;\n padding: 12px 20px 8px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: linear-gradient(180deg, rgba(18,18,18,0.98) 60%, transparent);\n }\n\n .status-bar::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 20px;\n right: 20px;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--wine), transparent);\n opacity: 0.4;\n }\n\n .app-title {\n font-family: 'Playfair Display', serif;\n font-size: 22px;\n font-weight: 700;\n letter-spacing: 4px;\n color: var(--text-primary);\n text-shadow: 0 0 20px rgba(139, 0, 0, 0.3);\n }\n\n .app-title span {\n color: var(--wine);\n }\n\n .search-btn {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: rgba(139, 0, 0, 0.15);\n border: 1px solid rgba(139, 0, 0, 0.3);\n color: var(--text-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 16px;\n }\n\n .search-btn:hover, .search-btn:active {\n background: rgba(139, 0, 0, 0.35);\n border-color: var(--wine);\n box-shadow: 0 0 20px rgba(139, 0, 0, 0.2);\n }\n\n /* Tab 切换 */\n .tab-content {\n position: relative;\n z-index: 1;\n flex: 1;\n overflow: hidden;\n }\n\n .tab-panel {\n position: absolute;\n inset: 0;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 16px 16px 8px;\n transition: opacity 0.4s ease, transform 0.4s ease;\n -webkit-overflow-scrolling: touch;\n }\n\n .tab-panel::-webkit-scrollbar {\n width: 3px;\n }\n\n .tab-panel::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .tab-panel::-webkit-scrollbar-thumb {\n background: var(--wine);\n border-radius: 10px;\n }\n\n .tab-panel.hidden-panel {\n opacity: 0;\n transform: translateY(10px);\n pointer-events: none;\n }\n\n .tab-panel.active-panel {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ===== 全部曲库 - 歌曲索引 ===== */\n .song-index {\n padding-bottom: 10px;\n }\n\n .song-section-title {\n font-family: 'Playfair Display', serif;\n font-size: 13px;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--text-muted);\n padding: 12px 4px 8px;\n border-bottom: 1px solid rgba(139, 0, 0, 0.15);\n margin-bottom: 4px;\n }\n\n .song-item {\n display: flex;\n align-items: center;\n padding: 12px 12px;\n margin: 2px 0;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.25s ease;\n position: relative;\n border-left: 2px solid transparent;\n }\n\n .song-item:hover, .song-item:active {\n background: rgba(139, 0, 0, 0.08);\n border-left-color: var(--wine);\n }\n\n .song-item.active {\n background: rgba(139, 0, 0, 0.12);\n border-left-color: var(--wine);\n }\n\n .song-item.active::before {\n content: '♪';\n position: absolute;\n left: -6px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 14px;\n color: var(--wine);\n opacity: 0.6;\n }\n\n .song-number {\n font-family: 'Cormorant Garamond', serif;\n font-size: 14px;\n color: var(--text-muted);\n width: 32px;\n text-align: right;\n margin-right: 14px;\n font-weight: 400;\n font-style: italic;\n }\n\n .song-name {\n font-family: 'Ma Shan Zheng', cursive;\n font-size: 20px;\n color: var(--text-primary);\n flex: 1;\n letter-spacing: 2px;\n line-height: 1.4;\n }\n\n .song-meta {\n font-size: 12px;\n color: var(--text-muted);\n font-family: 'Cormorant Garamond', serif;\n font-style: italic;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .song-meta i {\n font-size: 10px;\n color: var(--wine);\n opacity: 0.5;\n }\n\n .song-divider {\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(139, 0, 0, 0.08), transparent);\n margin: 0 12px;\n }\n\n /* ===== 收藏曲库 - 黑胶唱片卡片 ===== */\n .vinyl-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n padding: 4px 0 10px;\n }\n\n .vinyl-card {\n background: var(--dark-card);\n border-radius: 12px;\n overflow: hidden;\n border: 1px solid var(--dark-border);\n transition: all 0.35s ease;\n cursor: pointer;\n position: relative;\n }\n\n .vinyl-card:hover, .vinyl-card:active {\n transform: translateY(-3px);\n border-color: rgba(139, 0, 0, 0.3);\n box-shadow: 0 8px 30px rgba(139, 0, 0, 0.15);\n }\n\n .vinyl-cover {\n position: relative;\n aspect-ratio: 1;\n overflow: hidden;\n background: var(--dark-elevated);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .vinyl-cover .cover-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n position: absolute;\n inset: 0;\n }\n\n /* 黑胶唱片叠加效果 */\n .vinyl-disc {\n position: absolute;\n width: 65%;\n height: 65%;\n border-radius: 50%;\n background: radial-gradient(circle at 30% 30%, #333, #0a0a0a 60%, #000);\n box-shadow: \n inset 0 0 30px rgba(0,0,0,0.8),\n 0 4px 20px rgba(0,0,0,0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n z-index: 2;\n }\n\n .vinyl-card:hover .vinyl-disc {\n transform: rotate(25deg) scale(1.05);\n }\n\n .vinyl-disc::before {\n content: '';\n position: absolute;\n width: 30%;\n height: 30%;\n border-radius: 50%;\n background: radial-gradient(circle, #555, #222);\n border: 2px solid #111;\n box-shadow: inset 0 0 8px rgba(0,0,0,0.6);\n }\n\n .vinyl-disc::after {\n content: '';\n position: absolute;\n width: 8%;\n height: 8%;\n border-radius: 50%;\n background: var(--gold);\n box-shadow: 0 0 10px rgba(201, 168, 76, 0.3);\n }\n\n /* 唱片纹路 */\n .vinyl-grooves {\n position: absolute;\n inset: 12%;\n border-radius: 50%;\n border: 1px solid rgba(255,255,255,0.03);\n box-shadow: \n inset 0 0 0 4px rgba(255,255,255,0.02),\n inset 0 0 0 12px rgba(255,255,255,0.015),\n inset 0 0 0 24px rgba(255,255,255,0.01);\n }\n\n .vinyl-info {\n padding: 12px 14px 14px;\n }\n\n .vinyl-info h3 {\n font-family: 'Ma Shan Zheng', cursive;\n font-size: 17px;\n color: var(--text-primary);\n letter-spacing: 1px;\n line-height: 1.3;\n margin-bottom: 2px;\n }\n\n .vinyl-info p {\n font-family: 'Cormorant Garamond', serif;\n font-size: 12px;\n color: var(--text-muted);\n font-style: italic;\n letter-spacing: 0.5px;\n }\n\n .vinyl-badge {\n position: absolute;\n top: 8px;\n right: 8px;\n background: var(--wine);\n color: var(--text-primary);\n font-size: 9px;\n padding: 2px 8px;\n border-radius: 10px;\n font-family: 'Cormorant Garamond', serif;\n letter-spacing: 1px;\n z-index: 5;\n opacity: 0.9;\n }\n\n /* ===== 底部导航 ===== */\n .bottom-nav {\n position: relative;\n z-index: 20;\n display: flex;\n align-items: center;\n justify-content: space-around;\n padding: 8px 16px 20px;\n padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));\n background: linear-gradient(0deg, rgba(18,18,18,0.98) 70%, transparent);\n border-top: 1px solid rgba(139, 0, 0, 0.15);\n }\n\n .bottom-nav::before {\n content: '';\n position: absolute;\n top: -1px;\n left: 10%;\n right: 10%;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(139, 0, 0, 0.2), transparent);\n }\n\n .nav-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n padding: 6px 12px;\n border: none;\n background: transparent;\n color: var(--text-muted);\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n font-family: 'Cormorant Garamond', serif;\n font-size: 11px;\n letter-spacing: 1px;\n }\n\n .nav-btn i {\n font-size: 20px;\n transition: all 0.3s ease;\n }\n\n .nav-btn span {\n transition: all 0.3s ease;\n }\n\n .nav-btn.active {\n color: var(--text-primary);\n }\n\n .nav-btn.active i {\n color: var(--wine);\n text-shadow: 0 0 15px rgba(139, 0, 0, 0.3);\n }\n\n .nav-btn.active::after {\n content: '';\n position: absolute;\n top: -9px;\n left: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 2px;\n background: var(--wine);\n border-radius: 2px;\n box-shadow: 0 0 10px rgba(139, 0, 0, 0.4);\n }\n\n /* 导入按钮 - 突出加号 */\n .nav-btn-import {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--wine), var(--wine-glow));\n border: 2px solid rgba(201, 168, 76, 0.3);\n color: var(--text-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\n box-shadow: 0 4px 20px rgba(139, 0, 0, 0.35);\n position: relative;\n margin-top: -20px;\n }\n\n .nav-btn-import i {\n font-size: 26px;\n transition: transform 0.4s ease;\n }\n\n .nav-btn-import:hover, .nav-btn-import:active {\n transform: scale(1.08);\n box-shadow: 0 6px 30px rgba(139, 0, 0, 0.5);\n border-color: var(--gold);\n }\n\n .nav-btn-import:hover i {\n transform: rotate(90deg);\n }\n\n .nav-btn-import::after {\n content: '';\n position: absolute;\n inset: -4px;\n border-radius: 50%;\n border: 1px solid rgba(201, 168, 76, 0.1);\n animation: pulse-ring 2s ease-in-out infinite;\n }\n\n @keyframes pulse-ring {\n 0%, 100% { transform: scale(1); opacity: 0.5; }\n 50% { transform: scale(1.1); opacity: 0; }\n }\n\n /* 装饰性角落元素 */\n .corner-deco {\n position: absolute;\n pointer-events: none;\n z-index: 0;\n opacity: 0.08;\n }\n\n .corner-deco.top-right {\n top: -30px;\n right: -30px;\n width: 120px;\n height: 120px;\n border-radius: 50%;\n background: radial-gradient(circle, var(--wine), transparent 70%);\n }\n\n .corner-deco.bottom-left {\n bottom: -20px;\n left: -20px;\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background: radial-gradient(circle, var(--wine), transparent 70%);\n }\n\n /* 加载动画 */\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .song-item {\n animation: fadeInUp 0.5s ease backwards;\n }\n\n .song-item:nth-child(1) { animation-delay: 0.05s; }\n .song-item:nth-child(2) { animation-delay: 0.1s; }\n .song-item:nth-child(3) { animation-delay: 0.15s; }\n .song-item:nth-child(4) { animation-delay: 0.2s; }\n .song-item:nth-child(5) { animation-delay: 0.25s; }\n .song-item:nth-child(6) { animation-delay: 0.3s; }\n .song-item:nth-child(7) { animation-delay: 0.35s; }\n .song-item:nth-child(8) { animation-delay: 0.4s; }\n .song-item:nth-child(9) { animation-delay: 0.45s; }\n .song-item:nth-child(10) { animation-delay: 0.5s; }\n\n .vinyl-card {\n animation: fadeInUp 0.5s ease backwards;\n }\n\n .vinyl-card:nth-child(1) { animation-delay: 0.1s; }\n .vinyl-card:nth-child(2) { animation-delay: 0.2s; }\n .vinyl-card:nth-child(3) { animation-delay: 0.3s; }\n .vinyl-card:nth-child(4) { animation-delay: 0.4s; }\n\n /* 自定义封面颜色（无真实图片时使用） */\n .cover-placeholder {\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 36px;\n color: rgba(255,255,255,0.08);\n }\n\n /* 响应式微调 */\n @media (max-width: 380px) {\n .song-name { font-size: 17px; }\n .vinyl-info h3 { font-size: 15px; }\n .vinyl-grid { gap: 10px; }\n }\n\n @media (min-width: 431px) {\n .app-container {\n border-radius: 20px;\n height: 95vh;\n top: 2.5vh;\n border: 1px solid rgba(139, 0, 0, 0.15);\n }\n }\n </style>\n</head>\n<body>\n\n<div class=\"app-container\" id=\"app\">\n \n <!-- 背景五线谱纹理 -->\n <div class=\"music-texture\">\n <svg viewBox=\"0 0 430 932\" preserveAspectRatio=\"xMidYMid slice\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <pattern id=\"staff\" x=\"0\" y=\"0\" width=\"430\" height=\"60\" patternUnits=\"userSpaceOnUse\">\n <line x1=\"0\" y1=\"8\" x2=\"430\" y2=\"8\" stroke=\"#8B0000\" stroke-width=\"0.5\" opacity=\"0.3\"/>\n <line x1=\"0\" y1=\"16\" x2=\"430\" y2=\"16\" stroke=\"#8B0000\" stroke-width=\"0.5\" opacity=\"0.3\"/>\n <line x1=\"0\" y1=\"24\" x2=\"430\" y2=\"24\" stroke=\"#8B0000\" stroke-width=\"0.5\" opacity=\"0.3\"/>\n <line x1=\"0\" y1=\"32\" x2=\"430\" y2=\"32\" stroke=\"#8B0000\" stroke-width=\"0.5\" opacity=\"0.3\"/>\n <line x1=\"0\" y1=\"40\" x2=\"430\" y2=\"40\" stroke=\"#8B0000\" stroke-width=\"0.5\" opacity=\"0.3\"/>\n <!-- 音符装饰 -->\n <text x=\"60\" y=\"30\" font-size=\"14\" fill=\"#8B0000\" opacity=\"0.15\" font-family=\"serif\">♪</text>\n <text x=\"200\" y=\"18\" font-size=\"10\" fill=\"#8B0000\" opacity=\"0.12\" font-family=\"serif\">♫</text>\n <text x=\"340\" y=\"36\" font-size=\"12\" fill=\"#8B0000\" opacity=\"0.1\" font-family=\"serif\">♩</text>\n </pattern>\n </defs>\n <rect width=\"100%\" height=\"100%\" fill=\"url(#staff)\"/>\n </svg>\n </div>\n\n <!-- 装饰性光晕 -->\n <div class=\"corner-deco top-right\"></div>\n <div class=\"corner-deco bottom-left\"></div>\n\n <!-- 状态栏 / 标题区 -->\n <div class=\"status-bar\">\n <div class=\"app-title\">乐谱<span>架</span></div>\n <button class=\"search-btn\" aria-label=\"搜索\">\n <i class=\"fas fa-search\"></i>\n </button>\n </div>\n\n <!-- Tab 内容区 -->\n <div class=\"tab-content\">\n \n <!-- ===== 全部曲库 Tab ===== -->\n <div class=\"tab-panel active-panel\" id=\"panel-all\">\n <div class=\"song-index\">\n \n <div class=\"song-section-title\">\n <i class=\"fas fa-music\" style=\"margin-right: 6px; font-size: 10px; color: var(--wine);\"></i>\n 推荐曲谱\n </div>\n\n <div class=\"song-item active\">\n <span class=\"song-number\">01</span>\n <span class=\"song-name\">月光奏鸣曲</span>\n <div class=\"song-meta\">\n <span>贝多芬</span>\n <i class=\"fas fa-circle\"></i>\n <span>Op.27 No.2</span>\n </div>\n </div>\n <div class=\"song-divider\"></div>\n\n <div class=\"song-item\">\n <span class=\"song-number\">02</span>\n <span class=\"song-name\">致爱丽丝</span>\n <div class=\"song-meta\">\n <span>贝多芬</span>\n <i class=\"fas fa-circle\"></i>\n <span>WoO 59</span>\n </div>\n </div>\n <div class=\"song-divider\"></div>\n\n <div class=\"song-item\">\n <span class=\"song-number\">03</span>\n <span class=\"song-name\">G弦上的咏叹调</span>\n <div class=\"song-meta\">\n <span>巴赫</span>\n <i class=\"fas fa-circle\"></i>\n <span>BWV 1068</span>\n </div>\n </div>\n <div class=\"song-divider\"></div>\n\n <div class=\"song-item\">\n <span class=\"song-number\">04</span>\n <span class=\"song-name\">卡农</span>\n <div class=\"song-meta\">\n <span>帕赫贝尔</span>\n <i class=\"fas fa-circle\"></i>\n <span>P.37</span>\n </div>\n </div>\n <div class=\"song-divider\"></div>\n\n <div class=\"song-item\">\n <span class=\"song-number\">05</span>\n <span class=\"song-name\">夜曲 Op.9 No.2</span>\n <div class=\"song-meta\">\n <span>肖邦</span>\n <i class=\"fas fa-circle\"></i>\n <span>降E大调</span>\n </div>\n </div>\n <div class=\"song-divider\"></div>\n\n <div class=\"song-item\">\n <span class=\"song-number\">06</span>\n <span class=\"song-name\">匈牙利舞曲第五号</span>\n <div class=\"song-meta\">\n <span>勃拉姆斯</span>\n <i class=\"fas fa-circle\"></i>\n <span>WoO 1</span>\n </div>\n </div>\n <div class=\"song-divider\"></div>\n\n <div class=\"song-item\">\n <span class=\"song-number\">07</span>\n <span class=\"song-name\">四季·春</span>\n <div class=\"song-meta\">\n <span>维瓦尔第</span>\n <i class=\"fas fa-circle\"></i>\n <span>RV 269</span>\n </div>\n </div>\n <div class=\"song-divider\"></div>\n\n <div class=\"song-item\">\n <span class=\"song-number\">08</span>\n <span class=\"song-name\">小夜曲</span>\n <div class=\"song-meta\">\n <span>舒伯特</span>\n <i class=\"fas fa-circle\"></i>\n <span>D.957</span>\n </div>\n </div>\n <div class=\"song-divider\"></div>\n\n <div class=\"song-item\">\n <span class=\"song-number\">09</span>\n <span class=\"song-name\">梦幻曲</span>\n <div class=\"song-meta\">\n <span>舒曼</span>\n <i class=\"fas fa-circle\"></i>\n <span>Op.15 No.7</span>\n </div>\n </div>\n <div class=\"song-divider\"></div>\n\n <div class=\"song-item\">\n <span class=\"song-number\">10</span>\n <span class=\"song-name\">爱的礼赞</span>\n <div class=\"song-meta\">\n <span>埃尔加</span>\n <i class=\"fas fa-circle\"></i>\n <span>Op.12</span>\n </div>\n </div>\n\n </div>\n </div>\n\n <!-- ===== 收藏曲库 Tab ===== -->\n <div class=\"tab-panel hidden-panel\" id=\"panel-fav\">\n <div class=\"song-section-title\" style=\"margin-bottom: 12px;\">\n <i class=\"fas fa-heart\" style=\"margin-right: 6px; font-size: 10px; color: var(--wine);\"></i>\n 我的收藏\n </div>\n\n <div class=\"vinyl-grid\">\n <!-- 卡片 1 -->\n <div class=\"vinyl-card\">\n <div class=\"vinyl-cover\">\n <div class=\"cover-img\" style=\"background: linear-gradient(135deg, #1a0a0a, #2d0a0a, #1a0505);\"></div>\n <div class=\"cover-placeholder\" style=\"font-family: 'Ma Shan Zheng', cursive; font-size: 28px; color: rgba(201,168,76,0.15);\">月光</div>\n <div class=\"vinyl-disc\">\n <div class=\"vinyl-grooves\"></div>\n </div>\n <div class=\"vinyl-badge\">珍藏</div>\n </div>\n <div class=\"vinyl-info\">\n <h3>月光奏鸣曲</h3>\n <p>贝多芬 · 古典</p>\n </div>\n </div>\n\n <!-- 卡片 2 -->\n <div class=\"vinyl-card\">\n <div class=\"vinyl-cover\">\n <div class=\"cover-img\" style=\"background: linear-gradient(135deg, #0a0a1a, #1a0a2d, #0a051a);\"></div>\n <div class=\"cover-placeholder\" style=\"font-family: 'Ma Shan Zheng', cursive; font-size: 28px; color: rgba(201,168,76,0.15);\">四季</div>\n <div class=\"vinyl-disc\">\n <div class=\"vinyl-grooves\"></div>\n </div>\n <div class=\"vinyl-badge\">新进</div>\n </div>\n <div class=\"vinyl-info\">\n <h3>四季·春</h3>\n <p>维瓦尔第 · 巴洛克</p>\n </div>\n </div>\n\n <!-- 卡片 3 -->\n <div class=\"vinyl-card\">\n <div class=\"vinyl-cover\">\n <div class=\"cover-img\" style=\"background: linear-gradient(135deg, #1a1a0a, #2d2a0a, #1a1505);\"></div>\n <div class