/* AI我学 · 收藏按钮 + 悬停体验 + 个人中心收藏模块（独立插件样式，不依赖主题改动） */

/* 2026-10-02 用户定调：封面图上已自带学段/试用信息，HTML 浮层小签全部隐藏
   （data-* 保留供筛选，仅去视觉层；右上角让位给收藏按钮） */
.mx-card-stage,
.mx-card-trial { display: none !important; }

/* ── 卡片收藏按钮：悬停浮现，收藏后常驻 ── */
.mx-card-cover { position: relative; }
.mx-favbtn {
    position: absolute; right: 12px; top: 12px; z-index: 3;
    width: 34px; height: 34px; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .95); color: #8A8FA8;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; line-height: 0;
    box-shadow: 0 2px 8px rgba(23, 26, 51, .14);
    opacity: 0; transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, color .15s;
}
.mx-card:hover .mx-favbtn,
.mx-favbtn.is-fav,
.mx-favbtn:focus-visible { opacity: 1; transform: translateY(0); }
.mx-favbtn:active { transform: scale(.9) !important; }
.mx-favbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.mx-favbtn.is-fav { color: #E24B4A; }
.mx-favbtn.is-fav svg { fill: #E24B4A; stroke: #E24B4A; }
/* 主题对封面子元素有 hover 缩放（.mz-home ... > *），按钮不参与缩放 */
.mx-card:hover .mx-favbtn { transform: translateY(0) !important; }

/* ── 悬停浮层：底部渐暗 + 「立即体验」按钮（参考电商卡片 hover 模式） ── */
.mx-card-cover::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48%;
    background: linear-gradient(180deg, rgba(23, 26, 51, 0) 0%, rgba(23, 26, 51, .42) 100%);
    opacity: 0; transition: opacity .2s ease; pointer-events: none; z-index: 1;
}
.mx-card:hover .mx-card-cover::after,
.mx-card:focus-within .mx-card-cover::after { opacity: 1; }
.mx-trybtn {
    position: absolute; left: 50%; bottom: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 26px; border-radius: 999px;
    background: var(--accent, #4F46E5); color: #fff;
    font-size: 14px; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
    cursor: pointer; user-select: none;
    box-shadow: 0 8px 20px rgba(67, 56, 202, .42);
    opacity: 0; transform: translate(-50%, 8px);
}
.mx-trybtn svg { width: 14px; height: 14px; fill: #fff; flex: none; }
.mx-trybtn i { font-style: normal; }
.mx-card:hover .mx-trybtn,
.mx-card:focus-within .mx-trybtn {
    opacity: 1; transform: translate(-50%, 0) !important;
}
.mx-trybtn:hover { background: #4338CA; }
/* 首页主题给封面子元素配了 .55s 长过渡，浮层按钮要跟手 */
.mx-favbtn, .mx-trybtn { transition: opacity .2s ease, transform .2s ease, color .15s !important; }

/* 触屏设备：无 hover，收藏键 / 体验键 / 渐变常驻（按钮收小一号防挡封面） */
@media (hover: none) {
    .mx-favbtn { opacity: 1; transform: none !important; }
    .mx-card-cover::after { opacity: 1; }
    .mx-trybtn {
        opacity: 1; transform: translate(-50%, 0) !important;
        bottom: 10px; padding: 8px 20px; font-size: 13px;
    }
}

/* ── 提示气泡 ── */
.mxfav-toast {
    position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
    background: #171A33; color: #fff; font-size: 14px;
    padding: 11px 22px; border-radius: 999px; z-index: 99999;
    box-shadow: 0 8px 24px rgba(23, 26, 51, .25);
    opacity: 0; transition: opacity .2s;
}
.mxfav-toast.on { opacity: 1; }
.mxfav-toast a { color: #A5B4FC; margin-left: 8px; }

/* ── 个人中心 · 收藏模块 ── */
.mxfav-sec { margin-top: 28px; }
.mxfav-sec h2 { font-size: 20px; margin: 0 0 4px; }
.mxfav-sec .mxfav-sub { font-size: 13.5px; color: #8A8FA8; margin: 0 0 16px; }
.mxfav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.mxfav-card {
    position: relative; display: block; background: #fff;
    border: 1px solid rgba(23, 26, 51, .08); border-radius: 16px;
    overflow: hidden; text-decoration: none; color: inherit;
    transition: transform .15s, box-shadow .15s;
}
.mxfav-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(23, 26, 51, .1); }
.mxfav-card img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; display: block; }
.mxfav-card .mxfav-n { padding: 12px 14px 14px; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.mxfav-x {
    position: absolute; right: 8px; top: 8px; width: 26px; height: 26px;
    border: none; border-radius: 50%; background: rgba(23, 26, 51, .55); color: #fff;
    font-size: 14px; line-height: 26px; text-align: center; cursor: pointer; padding: 0;
}
.mxfav-x:hover { background: #E24B4A; }
.mxfav-empty {
    background: #F6F7FB; border: 1px dashed rgba(23, 26, 51, .15);
    border-radius: 16px; padding: 34px 20px; text-align: center;
    color: #8A8FA8; font-size: 14px;
}
.mxfav-empty a { color: #4F46E5; font-weight: 600; }
@media (max-width: 640px) {
    .mxfav-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .mxfav-card .mxfav-n { font-size: 13px; padding: 10px 11px 12px; }
}