/*!
 * 首页「产品系列」区块（Product Series） v1.5.6
 * - v1.5.6 抖动修复：桌面端不再动画 flex-grow。展开宽度先稳定到位，
 *   面板内容再淡入，避免文字在宽度动画过程中不断重新换行造成“抖动”。
 * - v1.5.4 抖动修复：trigger 不再切 flex-direction / justify-content / align-items /
 *   text-align / min-height 等不可过渡的离散属性；title 用 opacity + max-height 平滑
 *   收起，icon 始终留在顶部位置不动，hover 时不再有「图标和标题瞬间重排」的跳动。
 * - 全屏沉浸式大图（桌面/笔记本/平板：min-height: 100svh，背景图占满整个视口）
 * - 手机端保持原设计：图占顶部 56%、卡片纵向堆叠下方（避免卡片被推出屏幕）
 * - 桌面 / 笔记本 / 平板 / 手机 多段精细响应式：
 *     ≥ 1100px ：横向卡片（激活 grow=6，约 60%:10%）
 *     900~1099 ：横向卡片（激活 grow=5）
 *     700~899  ：横向卡片折叠手风琴（卡片≥5 时自动竖向）
 *     ≤ 700    ：纵向折叠手风琴 + 大图固定在顶部
 * - 非激活卡保持自身窄条高度（align-items: flex-start），激活卡向下"长"展开
 * - mouseleave 整组时只收卡片，背景图保留最后 hover 那张（连贯过渡）
 * - 激活面板高度由 JS 在 init 时预测量后写入 --apap-prs-panel-h，避免 max-height 截断 / 留白
 *
 * 设计令牌：使用 style.css 中暴露的 --apap-color-* / --apap-radius-* / --apap-shadow-*
 */

.apap-prs {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    color: #fff;
    background: var(--apap-color-surface-deep, #0a2c5c);

    /* v1.5.3：背景图全屏（占满整个视口高度）。
     * 优先用 100svh（small viewport height）：移动端浏览器地址栏出现/收起时不会跳动；
     * 不支持 svh 的旧浏览器自动 fallback 到 100vh。 */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: stretch;

    /* 提供给 JS 注入的激活面板真实高度（默认值仅作首屏兜底） */
    --apap-prs-panel-h: 220px;
    /* 激活倍数：v1.5.0 起加大到 6，让激活卡明显占主导（约 60%），其他 4 张窄条各 10%，
     * 视觉对比更接近 cdph 风。响应式各断点会覆盖。 */
    --apap-prs-active-grow: 6;
}

/* ---------- 全屏吸附（Sticky） ----------
   外层 .apap-prs-sticky-wrap 高度 ~175vh，内部 .apap-prs 已经是 min-height: 100vh，
   再加 position: sticky; top: 0 即可形成「滚到这里时产品系列整页占满 → 继续滚 ~75vh 才释放」的体验。
   - 仅在桌面端（≥900px 且高度 ≥720px）启用，移动端继续走原生流式布局，避免覆盖手机端的纵向手风琴模式。
   - prefers-reduced-motion 时强制退化。 */

.apap-prs-sticky-wrap {
    position: relative;
    background: var(--apap-color-surface-deep, #0a2c5c);
}

@media (min-width: 900px) and (min-height: 720px) {
    .apap-prs-sticky-wrap {
        min-height: 175vh;
    }
    .apap-prs-sticky-wrap > .apap-prs {
        position: sticky;
        top: 0;
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .apap-prs-sticky-wrap {
        min-height: 0 !important;
    }
    .apap-prs-sticky-wrap > .apap-prs {
        position: static !important;
        top: auto !important;
    }
}

/* ---- 背景图层 ---- */
.apap-prs-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* 容器单独成层，避免内部图片切换时影响外部 paint */
    transform: translate3d(0, 0, 0);
}

/* 抖动消除策略（v1.4.0 起）：
 * 1. 所有图固定 z-index:1，激活图 z-index:2 —— 切换时绘制顺序稳定，不会"重叠层乱跳"
 * 2. translate3d + backface-visibility:hidden + perspective:1000 —— 三重 GPU 提示，把每张图固定在独立合成层
 * 3. 不再用 transform: scale —— scale 会在亚像素层面与 cover 计算结果错开，是抖动的主要诱因
 * 4. opacity 过渡时间略加长（0.5s），让 crossfade 更柔和，掩盖任何残留的合成抖动
 */
.apap-prs-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    z-index: 1;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: opacity 0.5s ease;
    will-change: opacity;
}

.apap-prs-bg-img.is-active {
    opacity: 1;
    z-index: 2;
}

/* 没有任何图（section 默认图 + 任意卡片图都没配）时，提供柔和渐变兜底 */
.apap-prs:not(.has-bg) .apap-prs-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 25%, rgba(255, 255, 255, 0.12), transparent 60%),
        linear-gradient(135deg, var(--apap-color-accent-dark, #00317d), var(--apap-color-surface-deep, #0a2c5c));
}

/* 暗化遮罩：放在所有 <img> 之上、卡片之下；浓度交给 PHP 通过 --apap-prs-overlay 注入 */
.apap-prs-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 17, 33, var(--apap-prs-overlay, 0.2));
    pointer-events: none;
}

/* ---- 主容器 ----
 * v1.5.3 全屏化后，header 推到顶、cards 推到底（justify-content: space-between）。
 * 底部 padding 必须留够激活卡片向下"长"出来的展开高度（约 panel-h ≈ 200px），
 * 否则展开 panel 会撞到 section 底边被 overflow: hidden 截断。 */
.apap-prs-inner {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 32px));
    margin-inline: auto;
    padding: clamp(36px, 6vw, 72px) 0 clamp(160px, 18vh, 240px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(28px, 4vw, 56px);
    min-height: inherit;
}

/* ---- 顶部标题 ---- */
.apap-prs-header {
    max-width: 720px;
    /* 让 header 自身成为 inline-size 容器，标题可用 cqi 跟随真实宽度缩放 */
    container-type: inline-size;
    min-width: 0;
}

.apap-prs-sub {
    margin: 0 0 8px;
    font-size: clamp(13px, 1vw, 14px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    text-wrap: pretty;
    overflow-wrap: break-word;
}

/* 标题字号双重约束 + balance/换行兜底，防止长中英文标题溢出 */
.apap-prs-heading {
    margin: 0;
    font-size: clamp(22px, min(3vw, 8cqi), 40px);
    font-weight: 700;
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

/* ---- 底部卡片列表 ----
 * v1.5.2：align-items 从 stretch 改为 flex-start，让非激活卡保持自身（窄条）高度，
 * 不再被激活卡的展开高度强行拉高。激活卡向下"长"出来，其他卡靠顶对齐保持窄条。 */
.apap-prs-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 1vw, 14px);
    width: 100%;
    contain: layout style;
}

/* 单张卡片：默认 flex:1（等宽），激活时 flex-grow 走 --apap-prs-active-grow
 *
 * 性能策略（v1.3.0 起）：
 * 1. 完全去掉 backdrop-filter ——之前 blur(8px) 仍是 GPU 切换的最大开销
 *    取而代之用半透明纯色（暗蓝色），视觉差异可忽略，性能提升非常显著
 * 2. transition 时间从 0.4s → 0.32s，更利落
 * 3. translate3d(0,0,0) 提升到独立合成层，避免 flex-grow 触发周边重 paint
 * 4. 不再在 hover 时改 background-color——color 变化会与 flex-grow 抢资源
 *    hover 反馈改为 border + 内部图标轻微亮起（伪元素 / 子元素）
 */
.apap-prs-card {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background-color: rgba(7, 17, 33, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 14px rgba(7, 17, 33, 0.18);

    transform: translate3d(0, 0, 0);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.apap-prs-card:hover,
.apap-prs-card:focus-within {
    border-color: rgba(255, 255, 255, 0.4);
}

.apap-prs-card.is-active {
    flex-grow: var(--apap-prs-active-grow, 3);
    background-color: rgba(1, 64, 152, 0.48);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 28px rgba(7, 17, 33, 0.28);
}

/* ---- 卡片触发按钮 ----
 * v1.5.4 抖动修复：
 *   旧版 active 状态切换 flex-direction (column→row)、justify-content、align-items、
 *   text-align、min-height —— 这些 CSS 属性都不能 transition，会瞬间切换，
 *   导致 hover 第一帧 icon 和 title 位置"啪"地重排，产生肉眼可见的"跳"。
 *   v1.5.4 起：trigger 永远保持 column + 居中 布局，active 时只调整可平滑过渡的
 *   属性（padding / gap / min-height），icon 始终留在顶部位置不动；
 *   title 通过 opacity + max-height 渐隐，让位给 panel 内的 panel-title。 */
.apap-prs-card-trigger {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    min-height: 96px;
    padding: 18px 8px;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    text-align: center;
    font: inherit;
    transition: padding 0.32s ease-out, gap 0.32s ease-out, min-height 0.32s ease-out;
}

/* 激活态：保持 column 布局，仅调整可过渡的属性。
 * gap 收到 0，让 icon 紧贴 trigger 顶部；min-height 适度缩小，让 panel 紧接 trigger 之下。 */
.apap-prs-card.is-active .apap-prs-card-trigger {
    gap: 0;
    min-height: 60px;
    padding: 16px 14px 8px;
}

.apap-prs-card-trigger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.apap-prs-card-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    transition: transform 0.32s ease-out, background 0.2s ease, border-color 0.2s ease;
}

/* hover 时图标圆稍微亮起（替代之前 hover 改 background-color 的方案）—— 仅在子元素层做合成，开销极低 */
.apap-prs-card:hover .apap-prs-card-icon,
.apap-prs-card:focus-within .apap-prs-card-icon {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.85);
}

.apap-prs-plus {
    position: relative;
    width: 12px;
    height: 12px;
}

.apap-prs-plus::before,
.apap-prs-plus::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 1px;
    transition: transform 0.45s ease, opacity 0.3s ease;
}

.apap-prs-plus::before {
    inset: 5px 0;
    transform-origin: center;
}

.apap-prs-plus::after {
    inset: 0 5px;
    transform: rotate(0deg);
    transform-origin: center;
}

/* 激活时 + 旋转 135° 变 ×，并把图标圆背景填满 */
.apap-prs-card.is-active .apap-prs-card-icon {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.85);
    transform: rotate(135deg);
}

/* 标题：默认（窄条）状态居中、可换行；
 * v1.5.4 抖动修复：active 时不再切 text-align/white-space/overflow/flex 等离散属性，
 * 而是用 opacity + max-height 平滑收起，让 panel 内的 panel-title 接管「大标题」的展示。 */
.apap-prs-card-title {
    font-size: clamp(13px, 0.95vw, 15px);
    font-weight: 600;
    color: #fff;
    line-height: 1.35;
    text-align: center;
    word-break: break-word;
    overflow: hidden;
    max-height: 80px;
    transition: opacity 0.25s ease, max-height 0.32s ease-out;
}

.apap-prs-card.is-active .apap-prs-card-title {
    opacity: 0;
    max-height: 0;
}

/* ---- 展开面板（描述 + CTA） ----
 * 性能策略（v1.3.0 起）：
 * - 去掉 transform translateY，避免与 max-height + 卡片 flex-grow 抢渲染
 * - 过渡时间和卡片 flex-grow 同步（0.32s），曲线统一 ease-out
 * - opacity 提前一点开始，避免"先看到 padding 撑开但内容还没出来"的空白感
 */
.apap-prs-card-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 18px;
    color: #f5f8fc;
    transition:
        max-height 0.32s ease-out,
        opacity 0.16s ease,
        padding 0.32s ease-out;
}

.apap-prs-card.is-active .apap-prs-card-panel {
    max-height: var(--apap-prs-panel-h, 320px);
    opacity: 1;
    padding: 4px 22px 22px;
    transition-delay: 0s, 0.08s, 0s;
}

.apap-prs-card-panel-title {
    margin: 0 0 8px;
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 700;
    color: #fff;
}

.apap-prs-card-panel-divider {
    display: block;
    width: 28px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    margin: 6px 0 12px;
}

.apap-prs-card-panel-desc {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.apap-prs-card-panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    transition: gap 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

.apap-prs-card-panel-cta:hover,
.apap-prs-card-panel-cta:focus-visible {
    gap: 14px;
    color: #fff;
}

.apap-prs-card-panel-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 2px;
}

.apap-prs-card-panel-cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.apap-prs-card-panel-cta:hover .apap-prs-card-panel-cta-arrow,
.apap-prs-card-panel-cta:focus-visible .apap-prs-card-panel-cta-arrow {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
    transform: translateX(2px);
}

.apap-prs-card-panel-cta.is-disabled {
    opacity: 0.7;
    cursor: default;
}

.apap-prs-card-panel-cta.is-disabled:hover {
    gap: 10px;
}

/* ---- 入场动画：进入视口时整组卡片轻微浮入 ----
 * 入场只跑一次，性能不敏感，但仍然只用 opacity（GPU 加速），不用 transform translate 避免与后续 hover 切换叠加
 */
@media (prefers-reduced-motion: no-preference) {
    .apap-prs-cards {
        opacity: 0;
        transition: opacity 0.6s ease;
    }
    .apap-prs.is-in-view .apap-prs-cards {
        opacity: 1;
    }

    .apap-prs-header {
        opacity: 0;
        transition: opacity 0.6s ease;
    }
    .apap-prs.is-in-view .apap-prs-header {
        opacity: 1;
    }
}

/* ---- 减弱动画偏好 ---- */
@media (prefers-reduced-motion: reduce) {
    .apap-prs,
    .apap-prs-card,
    .apap-prs-card-panel,
    .apap-prs-card-trigger,
    .apap-prs-card-panel-cta,
    .apap-prs-card-panel-cta-arrow,
    .apap-prs-card-icon,
    .apap-prs-bg-img {
        transition: none !important;
    }
}

/* ---- 兼容退化：浏览器不支持 backdrop-filter 时（旧 Edge 等）走更不透明的底 ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .apap-prs-card {
        background: rgba(7, 17, 33, 0.45);
    }
    .apap-prs-card.is-active {
        background: rgba(1, 64, 152, 0.78);
    }
}

/* ============== 响应式断点 ==============
   v1.1.0 起做了 4 段精细化，避免老版本「720px 以上一统到底」的死板
*/

/* 大笔记本 / 小桌面：900~1099px —— 激活倍数 5（约 56% : 11%），仍保持强对比 */
@media (max-width: 1099px) and (min-width: 900px) {
    .apap-prs {
        --apap-prs-active-grow: 5;
        min-height: 100vh;
        min-height: 100svh;
    }
    .apap-prs-card-trigger {
        padding: 16px 14px;
        gap: 10px;
    }
    .apap-prs-card-panel-desc {
        -webkit-line-clamp: 4;
    }
}

/* 平板横屏 / 小笔记本：700~899px —— 卡片≥5 时切到 2 行（自动 wrap）；激活倍数再减 */
@media (max-width: 899px) and (min-width: 701px) {
    .apap-prs {
        --apap-prs-active-grow: 3;
        min-height: 100vh;
        min-height: 100svh;
    }
    .apap-prs-cards {
        flex-wrap: wrap;
        gap: 10px;
    }
    .apap-prs-card {
        flex: 1 1 calc(50% - 10px);
        min-width: 200px;
        /* 平板上彻底关闭 backdrop blur，避免低端 GPU 卡顿 */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: rgba(7, 17, 33, 0.45);
    }
    .apap-prs-card.is-active {
        flex: 1 1 100%;
        background-color: rgba(1, 64, 152, 0.7);
    }
    .apap-prs-card-trigger {
        padding: 16px 14px;
    }
    .apap-prs-card-panel-desc {
        -webkit-line-clamp: 4;
    }
}

/* 手机 / 平板竖屏：≤700px —— 参考图新布局
 *
 *   - 激活的那张卡片"独立"占满整行（grid-column: 1 / -1），显示完整面板（标题 + 描述 + CTA + × 关闭按钮）
 *   - 未激活的 4 张紧凑横向 grid 排列（4 列 minmax 0 1fr），icon 在上、title 在下，每张高 ~70-80px
 *   - 默认激活某一张（运营在后台设的 default_active；没设则 JS 自动激活第 1 张）
 *
 * 这样把"竖向手风琴"改成"独立大面板 + 4 列紧凑卡片选择栏"，符合参考图视觉。
 *
 * v1.6.1 抖动修复：
 *   - 手机端**全局关闭** transition / animation —— 切换激活时 grid 会发生 order / grid-column 重排，
 *     这不能 transition；与此同时旧激活卡的 panel max-height / padding 还在跑过渡，新激活卡也在跑，
 *     两张卡的中间帧叠加就出现"两张卡都在 morph"的抖动。
 *     直接把所有 transition / animation 关掉，让切换在单帧内原子完成，不抖动。
 *   - panel max-height 从 none 改成 9999px —— max-height: none 不是数值不能参与过渡；改成大数值
 *     即使将来需要恢复过渡也能正常工作。
 *   - .apap-prs-cards 加 contain: layout style —— 让卡片切换的 reflow 不外泄到 hero / 标题。
 */
@media (max-width: 700px) {
    /* ── 抖动消除 ── 手机端全部交互瞬时切换，不跑过渡 / 入场动画 ── */
    .apap-prs-cards,
    .apap-prs-card,
    .apap-prs-card-trigger,
    .apap-prs-card-panel,
    .apap-prs-card-icon,
    .apap-prs-card-title,
    .apap-prs-card-close,
    .apap-prs-plus,
    .apap-prs-plus::before,
    .apap-prs-plus::after,
    .apap-prs-card-panel-cta,
    .apap-prs-card-panel-cta-arrow {
        transition: none !important;
        animation: none !important;
    }

    .apap-prs {
        min-height: 0;
        --apap-prs-active-grow: 1;
    }
    .apap-prs-inner {
        padding: clamp(28px, 7vw, 48px) 0 clamp(20px, 5vw, 36px);
        gap: clamp(20px, 4vw, 32px);
        min-height: 0;
    }
    /* 移动端：背景图占据上半截高度（min-height by content + 大图）；卡片堆叠在下方 */
    .apap-prs-bg {
        position: absolute;
        inset: 0;
    }
    .apap-prs-bg-img {
        height: 56%;
        bottom: auto;
    }
    .apap-prs-bg-overlay {
        background: linear-gradient(
            180deg,
            rgba(7, 17, 33, calc(var(--apap-prs-overlay, 0.2) * 0.4)) 0%,
            rgba(7, 17, 33, calc(var(--apap-prs-overlay, 0.2) * 0.7)) 35%,
            rgba(7, 17, 33, 0.85) 60%,
            rgba(7, 17, 33, 0.95) 100%
        );
    }
    .apap-prs-header {
        padding-top: clamp(160px, 38vw, 240px);
    }

    /* 卡片栏：grid 4 列；激活的那张通过 grid-column: 1 / -1 占满整行（独立大面板） */
    .apap-prs-cards {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
        flex-direction: row; /* 覆盖之前 column；某些浏览器 grid 仍会读 flex 兜底 */
        /* 限制布局重排只在卡片栏内部进行，不外泄影响 hero / 标题 */
        contain: layout style;
    }

    /* ── 激活的那张：独立大面板，占满整行 ── */
    .apap-prs-card.is-active {
        grid-column: 1 / -1;
        order: -1; /* 视觉上排在最前面（hero 标题之下、4 列卡片栏之上） */
        flex: none; /* 覆盖外层 .apap-prs-card { flex: 1 1 0 } */
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: rgba(1, 64, 152, 0.78);
        border-radius: 18px;
        padding: 0;
        position: relative;
        overflow: visible; /* 让 × 按钮溢出顶部可见 */
        margin-top: 18px;  /* 留空间给溢出顶部的 × 按钮 */
    }
    /* 激活态内部：trigger 隐藏（× 按钮替代关闭交互），panel 完整展开 */
    .apap-prs-card.is-active .apap-prs-card-trigger {
        display: none;
    }
    .apap-prs-card.is-active .apap-prs-card-panel {
        max-height: 9999px; /* 用大数值替代 none —— none 不是数值，无法与未来 transition 协作 */
        opacity: 1;
        padding: 24px 22px 22px;
    }
    .apap-prs-card.is-active .apap-prs-card-panel-title {
        font-size: 17px;
        margin-bottom: 10px;
    }
    .apap-prs-card.is-active .apap-prs-card-panel-desc {
        font-size: 13px;
        -webkit-line-clamp: unset;
        margin-bottom: 18px;
    }

    /* ── 未激活的 4 张：紧凑横向 chip ── */
    .apap-prs-card:not(.is-active) {
        flex: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: rgba(7, 17, 33, 0.55);
        border-radius: 12px;
        overflow: hidden;
    }
    .apap-prs-card:not(.is-active) .apap-prs-card-trigger {
        min-height: 70px;
        padding: 12px 6px;
        gap: 8px;
        transition: none;
    }
    .apap-prs-card:not(.is-active) .apap-prs-card-icon {
        width: 22px;
        height: 22px;
        border-width: 1px;
    }
    .apap-prs-card:not(.is-active) .apap-prs-card-title {
        font-size: 12px;
        line-height: 1.25;
        text-align: center;
    }
    .apap-prs-card:not(.is-active) .apap-prs-card-panel {
        display: none; /* 未激活态不显示 panel，节省 reflow */
    }

    /* ── 圆形 × 关闭按钮（仅激活态可见，浮在面板顶部） ── */
    .apap-prs-card-close {
        position: absolute;
        top: -18px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(7, 17, 33, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.45);
        color: #fff;
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 4;
        padding: 0;
        line-height: 0;
        transition: background 0.2s ease, transform 0.2s ease;
    }
    .apap-prs-card-close:hover,
    .apap-prs-card-close:focus-visible {
        background: rgba(1, 64, 152, 0.95);
        outline: none;
    }
    .apap-prs-card.is-active .apap-prs-card-close {
        display: inline-flex;
    }
}

/* 桌面 / 平板（>700px）：完全不需要 × 关闭按钮 —— 走原 hover 切换体验 */
@media (min-width: 701px) {
    .apap-prs-card-close { display: none !important; }
}