.pf-mask-icon {
    display: inline-block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: color 0.3s ease;
}

/* ============================================================
   二、小图标条 .pf-bar
   ============================================================ */
.pf-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 4px 0 20px;
    padding: 0;
}

.pf-bar .pf-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pf-bar .pf-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 26px;
    line-height: 1;
    color: #94a3b8;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease, background-color 0.3s ease;
    box-sizing: border-box;
}

.pf-bar .pf-icon::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: var(--pf-brand);
    transition: width 0.3s ease;
    border-radius: 3px;
    box-shadow: 0 0 10px var(--pf-brand);
}

.pf-bar .pf-icon:hover {
    color: var(--pf-brand);
    background-color: rgba(0, 0, 0, 0.02);
}

.pf-bar .pf-icon:hover::after {
    width: 80%;
}

/* 各平台品牌色 */
.pf-bar .pf-spotify    { --pf-brand: #1ed760; }
.pf-bar .pf-apple      { --pf-brand: #fa586a; }
.pf-bar .pf-amazon     { --pf-brand: #00a8e1; }
.pf-bar .pf-tidal      { --pf-brand: #11181c; }
.pf-bar .pf-deezer     { --pf-brand: #a238ff; }
.pf-bar .pf-youtube    { --pf-brand: #ff0000; }
.pf-bar .pf-soundcloud { --pf-brand: #ff5500; }
.pf-bar .pf-qobuz      { --pf-brand: #004b87; }
.pf-bar .pf-audible    { --pf-brand: #f8991d; }

/* Amazon Music */
.pf-bar .pf-amazon {
    font-size: 24px;               /* ← 基准字号，决定 Amazon 图形整体大小 */
    display: grid;
    place-items: center;
    padding: 0;
}

.pf-amazon-label {
    font-size: 0.5em;
    font-weight: 800;
    letter-spacing: -0.3px;
    text-transform: lowercase;   
    color: currentColor;
    margin-bottom: 1px;
    transform: scale(0.9);
    font-family: 'Segoe UI', 'Roboto', sans-serif;
}

.pf-amazon-wave {
    display: block;
    width: 1.2em;
    height: 0.45em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M2 6 Q 12 12, 20 11 Q 28 10, 38 6' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpolygon points='36,3 40,6 36,9' fill='black' transform='rotate(15, 38, 6)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M2 6 Q 12 12, 20 11 Q 28 10, 38 6' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpolygon points='36,3 40,6 36,9' fill='black' transform='rotate(15, 38, 6)'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.pf-glyph-amazon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.08em;
    line-height: 1;
    flex-shrink: 0;
}

/* TIDAL 小图标 */
.pf-bar .pf-tidal::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0.75 8.25 4.5 4.5l3.75 3.75L4.5 12 0.75 8.25Zm15 0L12 4.5 8.25 8.25 12 12l-3.75 3.75L12 19.5l3.75-3.75L12 12l3.75-3.75Zm0 0L19.5 12l3.75-3.75L19.5 4.5l-3.75 3.75Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0.75 8.25 4.5 4.5l3.75 3.75L4.5 12 0.75 8.25Zm15 0L12 4.5 8.25 8.25 12 12l-3.75 3.75L12 19.5l3.75-3.75L12 12l3.75-3.75Zm0 0L19.5 12l3.75-3.75L19.5 4.5l-3.75 3.75Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Qobuz 小图标 */
.pf-bar .pf-qobuz {
    font-size: 24px;
    font-weight: 800;
}

.pf-bar .pf-qobuz span {
    font-weight: 800;
    font-size: 24px;
}

/* Audible 小图标 */
.pf-bar .pf-audible::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M16.94,15.6069c4.6839-2.1205,10.0664-2.0582,14.7.17,3.1854,1.5239,5.8173,4.002,7.53,7.09l-3.25,1.57c-4.1203-7.4003-13.3086-10.2859-20.92-6.57-2.2481,1.1596-4.2091,2.8063-5.74,4.82,1.7582-3.1038,4.434-5.5875,7.66-7.11l.02.03Z'/%3E%3Cpath d='M22.05,21.4069c-3.1743-.0092-6.2056,1.3194-8.35,3.66,2.23-3.5578,6.102-5.7532,10.3-5.84,4.2522.0493,8.1665,2.3272,10.31,6l-3.15,1.54c-1.9231-3.2242-5.3576-5.2449-9.11-5.36Z'/%3E%3Cpath d='M29.57,27.5469l-3.16,1.58c-.9263-1.5589-2.5283-2.5948-4.33-2.8-1.2973-.061-2.577.3197-3.63,1.08,1.1199-1.7814,2.9742-2.9724,5.06-3.25,2.4998-.1122,4.8474,1.2011,6.06,3.39Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M16.94,15.6069c4.6839-2.1205,10.0664-2.0582,14.7.17,3.1854,1.5239,5.8173,4.002,7.53,7.09l-3.25,1.57c-4.1203-7.4003-13.3086-10.2859-20.92-6.57-2.2481,1.1596-4.2091,2.8063-5.74,4.82,1.7582-3.1038,4.434-5.5875,7.66-7.11l.02.03Z'/%3E%3Cpath d='M22.05,21.4069c-3.1743-.0092-6.2056,1.3194-8.35,3.66,2.23-3.5578,6.102-5.7532,10.3-5.84,4.2522.0493,8.1665,2.3272,10.31,6l-3.15,1.54c-1.9231-3.2242-5.3576-5.2449-9.11-5.36Z'/%3E%3Cpath d='M29.57,27.5469l-3.16,1.58c-.9263-1.5589-2.5283-2.5948-4.33-2.8-1.2973-.061-2.577.3197-3.63,1.08,1.1199-1.7814,2.9742-2.9724,5.06-3.25,2.4998-.1122,4.8474,1.2011,6.06,3.39Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* "Mehr erfahren" 链接 */
.pf-bar .pf-link {
    color: #64748b;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    margin-left: 28px;
}

.pf-bar .pf-link:hover {
    color: #3b82f6;
}

.pf-bar .pf-link:hover .pf-link-arrow {
    transform: translateX(3px);
}

.pf-bar .pf-link-arrow {
    transition: transform 0.3s ease;
    font-size: 14px;
}

/* ============================================================
   三、大卡片网格 .platform-grid
   ============================================================ */
.platform-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.platform-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    font-size: 14px;
    color: #334155;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.platform-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
    transform: translateY(-2px);
}

/* 卡片里的 Font Awesome 图标 */
.platform-card i {
    font-size: 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

/* 卡片里的 CSS mask 图标（TIDAL / YouTube Music / Audible） */
.platform-card .pf-mask-icon {
    width: 32px;
    height: 32px;
    color: #94a3b8;
}

/* Qobuz 字母占位 */
.platform-card .platform-qobuz-letter {
    font-size: 28px;
    font-weight: 800;
    line-height: 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

/* ---------- CSS mask 图标定义 ---------- */

/* TIDAL */
.pf-tidal-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0.75 8.25 4.5 4.5l3.75 3.75L4.5 12 0.75 8.25Zm15 0L12 4.5 8.25 8.25 12 12l-3.75 3.75L12 19.5l3.75-3.75L12 12l3.75-3.75Zm0 0L19.5 12l3.75-3.75L19.5 4.5l-3.75 3.75Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0.75 8.25 4.5 4.5l3.75 3.75L4.5 12 0.75 8.25Zm15 0L12 4.5 8.25 8.25 12 12l-3.75 3.75L12 19.5l3.75-3.75L12 12l3.75-3.75Zm0 0L19.5 12l3.75-3.75L19.5 4.5l-3.75 3.75Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* YouTube Music */
.pf-youtube-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4.8c3.977 0 7.2 3.223 7.2 7.2s-3.223 7.2-7.2 7.2S4.8 15.977 4.8 12 8.023 4.8 12 4.8zM9.6 8.4v7.2l6-3.6-6-3.6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4.8c3.977 0 7.2 3.223 7.2 7.2s-3.223 7.2-7.2 7.2S4.8 15.977 4.8 12 8.023 4.8 12 4.8zM9.6 8.4v7.2l6-3.6-6-3.6z'/%3E%3C/svg%3E");
}

/* Audible */
.pf-audible-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M16.94,15.6069c4.6839-2.1205,10.0664-2.0582,14.7.17,3.1854,1.5239,5.8173,4.002,7.53,7.09l-3.25,1.57c-4.1203-7.4003-13.3086-10.2859-20.92-6.57-2.2481,1.1596-4.2091,2.8063-5.74,4.82,1.7582-3.1038,4.434-5.5875,7.66-7.11l.02.03Z'/%3E%3Cpath d='M22.05,21.4069c-3.1743-.0092-6.2056,1.3194-8.35,3.66,2.23-3.5578,6.102-5.7532,10.3-5.84,4.2522.0493,8.1665,2.3272,10.31,6l-3.15,1.54c-1.9231-3.2242-5.3576-5.2449-9.11-5.36Z'/%3E%3Cpath d='M29.57,27.5469l-3.16,1.58c-.9263-1.5589-2.5283-2.5948-4.33-2.8-1.2973-.061-2.577.3197-3.63,1.08,1.1199-1.7814,2.9742-2.9724,5.06-3.25,2.4998-.1122,4.8474,1.2011,6.06,3.39Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M16.94,15.6069c4.6839-2.1205,10.0664-2.0582,14.7.17,3.1854,1.5239,5.8173,4.002,7.53,7.09l-3.25,1.57c-4.1203-7.4003-13.3086-10.2859-20.92-6.57-2.2481,1.1596-4.2091,2.8063-5.74,4.82,1.7582-3.1038,4.434-5.5875,7.66-7.11l.02.03Z'/%3E%3Cpath d='M22.05,21.4069c-3.1743-.0092-6.2056,1.3194-8.35,3.66,2.23-3.5578,6.102-5.7532,10.3-5.84,4.2522.0493,8.1665,2.3272,10.31,6l-3.15,1.54c-1.9231-3.2242-5.3576-5.2449-9.11-5.36Z'/%3E%3Cpath d='M29.57,27.5469l-3.16,1.58c-.9263-1.5589-2.5283-2.5948-4.33-2.8-1.2973-.061-2.577.3197-3.63,1.08,1.1199-1.7814,2.9742-2.9724,5.06-3.25,2.4998-.1122,4.8474,1.2011,6.06,3.39Z'/%3E%3C/svg%3E");
}

/* ============================================================
   四、响应式适配
   ============================================================ */

/* ---------- 平板 / 小笔记本（≤ 992px） ---------- */
@media (max-width: 992px) {
    .platform-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

/* ---------- 平板竖屏 / 大手机（≤ 768px） ---------- */
@media (max-width: 768px) {

    /* --- 小图标条 .pf-bar --- */
    .pf-bar {
        margin: 4px 0 16px;
        flex-wrap: wrap;               /* 允许换行 */
        row-gap: 12px;
    }

    .pf-bar .pf-icons {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pf-bar .pf-icon {
        width: 46px;
        height: 46px;
        border-radius: 8px;
        font-size: 22px;
    }

    /* Amazon 基准字号同步缩小 */
    .pf-bar .pf-amazon {
        font-size: 20px;
    }

    /* Qobuz 字母同步缩小 */
    .pf-bar .pf-qobuz,
    .pf-bar .pf-qobuz span {
        font-size: 20px;
    }

    /* TIDAL / Audible ::before 尺寸同步缩小 */
    .pf-bar .pf-tidal::before,
    .pf-bar .pf-audible::before {
        width: 26px;
        height: 26px;
    }

    /* 链接：缩小 + 左边距缩小 */
    .pf-bar .pf-link {
        font-size: 15px;
        margin-left: 16px;
    }

    /* --- 大卡片网格 .platform-grid --- */
    .platform-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .platform-card {
        padding: 14px 16px;
        gap: 8px;
    }

    .platform-card i,
    .platform-card .pf-mask-icon,
    .platform-card .platform-qobuz-letter {
        font-size: 28px;
        width: 28px;
        height: 28px;
    }

    .platform-card .platform-qobuz-letter {
        font-size: 24px;
        line-height: 28px;
    }

    /* Amazon 大卡片图标同步缩小 */
    .platform-card.amazon .pf-glyph-amazon {
        font-size: 20px;
    }
}

/* ---------- 手机（≤ 576px） ---------- */
@media (max-width: 576px) {

    /* --- 小图标条 .pf-bar --- */
    .pf-bar {
        margin: 4px 0 12px;
        flex-direction: column;        /* 图标条和链接上下排列 */
        align-items: center;
        gap: 10px;
    }

    .pf-bar .pf-icons {
        gap: 4px;
    }

    .pf-bar .pf-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        font-size: 20px;
    }

    /* Amazon 基准字号 */
    .pf-bar .pf-amazon {
        font-size: 18px;
    }

    /* Qobuz 字母 */
    .pf-bar .pf-qobuz,
    .pf-bar .pf-qobuz span {
        font-size: 18px;
    }

    /* TIDAL / Audible ::before */
    .pf-bar .pf-tidal::before,
    .pf-bar .pf-audible::before {
        width: 22px;
        height: 22px;
    }

    /* 链接：取消左边距，独立一行居中 */
    .pf-bar .pf-link {
        font-size: 14px;
        margin-left: 0;
    }

    /* --- 大卡片网格 .platform-grid --- */
    .platform-grid {
        grid-template-columns: 1fr;    /* 一行一个 */
        gap: 8px;
    }

    .platform-card {
        padding: 12px 16px;
        gap: 8px;
        font-size: 13px;
    }

    .platform-card i,
    .platform-card .pf-mask-icon,
    .platform-card .platform-qobuz-letter {
        font-size: 24px;
        width: 24px;
        height: 24px;
    }

    .platform-card .platform-qobuz-letter {
        font-size: 20px;
        line-height: 24px;
    }

    /* Amazon 大卡片图标 */
    .platform-card.amazon .pf-glyph-amazon {
        font-size: 18px;
    }
}

/* ---------- 超小屏（≤ 360px） ---------- */
@media (max-width: 360px) {

    /* 图标条：进一步缩小 */
    .pf-bar .pf-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .pf-bar .pf-amazon {
        font-size: 16px;
    }

    .pf-bar .pf-qobuz,
    .pf-bar .pf-qobuz span {
        font-size: 16px;
    }

    .pf-bar .pf-tidal::before,
    .pf-bar .pf-audible::before {
        width: 20px;
        height: 20px;
    }

    /* 卡片：内边距进一步缩小 */
    .platform-card {
        padding: 10px 14px;
        gap: 6px;
        font-size: 12px;
    }

    .platform-card i,
    .platform-card .pf-mask-icon,
    .platform-card .platform-qobuz-letter {
        font-size: 22px;
        width: 22px;
        height: 22px;
    }

    .platform-card .platform-qobuz-letter {
        font-size: 18px;
        line-height: 22px;
    }

    .platform-card.amazon .pf-glyph-amazon {
        font-size: 16px;
    }
}

/* ---------- 横屏手机 / 矮屏优化（≤ 480px 高） ---------- */
@media (max-height: 480px) and (orientation: landscape) {
    .pf-bar {
        margin: 2px 0 8px;
    }

    .pf-bar .pf-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .pf-bar .pf-amazon {
        font-size: 16px;
    }

    .pf-bar .pf-qobuz,
    .pf-bar .pf-qobuz span {
        font-size: 16px;
    }

    .pf-bar .pf-tidal::before,
    .pf-bar .pf-audible::before {
        width: 20px;
        height: 20px;
    }

    .platform-card {
        padding: 10px 14px;
    }
}

/* ---------- 触摸设备：去掉 hover 依赖（可选） ---------- */
@media (hover: none) {
    .platform-card:hover {
        transform: none;               /* 移动端不要上浮，避免误触 */
        box-shadow: none;
    }

    .pf-bar .pf-icon:hover {
        background-color: transparent;
    }

    .pf-bar .pf-icon:hover::after {
        width: 0;
    }
}