.mb *, .mb *::before, .mb *::after { box-sizing: border-box; }
@keyframes mbSpin { to { transform: rotate(360deg); } }
.mb-id-sig {
    margin-top: .18rem;
    font-size: .84rem;
    color: var(--mb-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 42rem;
}
.pn-chip.is-vip {
    color: #fff;
    background: linear-gradient(135deg, #fb7299, #f25d8e);
    border-color: transparent;
}

.mb-hero-link {
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: .78rem;
    font-weight: 600;
    color: var(--mb-theme-deep);
    padding: .28rem .7rem;
    border-radius: 999px;
    background: var(--mb-fill);
    border: 1px solid var(--mb-line-soft);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.mb-hero-link:hover {
    color: var(--mb-theme-deep);
    border: 1px solid color-mix(in srgb, var(--mb-theme) 28%, transparent);
    background: var(--mb-theme-soft);
	text-decoration: none; 
}

/* ==========================================================================
   2. 工具栏
   --------------------------------------------------------------------------
   容器 / 搜索框 / 筛选 / 排序全部走公共类，本页不再自造：
     .pn-bar-tools  →  .pn-search + .pn-scroll-x(.pn-fbtn) + .pn-sorts(.pn-sbtn)
   （曾经的 .mb-bar / .mb-filters / .mb-pill / .mb-search 已全部拆除）
   ========================================================================== */

/* ==========================================================================
   3. 卡片墙
   ========================================================================== */
/* 网格参数与公共 .pn-roster 对齐：150px 列宽 / 1rem 间距
   （卡片内部仍是 3:4 竖版海报 + 角标 + 评分浮层，是番剧内容本身决定的） */
.mb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}
.mb-card {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: var(--mb-radius-sm);
    overflow: hidden;
    background: var(--mb-card);
    border: 1px solid var(--mb-line);
    box-shadow: var(--mb-shadow);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mb-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mb-shadow-lg);
    border-color: color-mix(in srgb, var(--mb-theme) 35%, var(--mb-line));
    text-decoration: none;
}
.mb-cover {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--mb-fill);
    overflow: hidden;
}
.mb-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.mb-card:hover .mb-cover img { transform: scale(1.04); }
.mb-badges {
    position: absolute;
    top: 6px; left: 6px; right: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    pointer-events: none;
}
.mb-badge {
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.6;
    padding: 0 .38rem;
    border-radius: 4px;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    white-space: nowrap;
}
.mb-badge.is-doing { background: var(--mb-theme); }
.mb-badge.is-done  { background: color-mix(in srgb, var(--mb-green) 88%, #000); }
.mb-badge.is-want  { background: color-mix(in srgb, var(--mb-blue) 88%, #000); }
.mb-badge.is-vip   { background: linear-gradient(135deg, #fb7299, #f25d8e); }
.mb-score {
    position: absolute;
    right: 6px; bottom: 6px;
    font-size: .72rem;
    font-weight: 800;
    color: #fff;
    padding: .05rem .38rem;
    border-radius: 6px;
    background: linear-gradient(135deg, #ffa726, #fb8c00);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.mb-body { padding: .5rem .55rem .6rem; }
.mb-title {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mb-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;
}
.mb-meta {
    margin-top: .3rem;
    display: flex;
    flex-wrap: wrap;
    gap: .28rem;
    font-size: .68rem;
    color: var(--mb-text-3);
}
.mb-meta span {
    padding: 0 .34rem;
    border-radius: 999px;
    background: var(--mb-fill);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mb-prog {
    margin-top: .32rem;
    font-size: .68rem;
    color: var(--mb-theme-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   响应式
   --------------------------------------------------------------------------
   断点与公共 panel.css 统一为 640px（原来是 680px，导致本页比其他四页早一步收缩）
   名片本身的收缩交给 panel.css 的 @640 处理，这里只留本页独有的
   ========================================================================== */
@media (max-width: 640px) {
    .pn-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pn-metric { padding: .8rem .3rem .85rem; }
    .pn-metric-val { font-size: 1.15rem; }
    .pn-metric-key { font-size: .66rem; }
    .mb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mb-title { font-size: .76rem; }
}