/* ==========================================================================
   father / page.css — 教父线路样式
   布局参考资源站惯用的「海报墙 + 卡片角标」结构，配色与字体本自有站点。
   ========================================================================== */

:root {
    --bg: #f5f6f8;
    --bg-elev: #ffffff;
    --bg-sunken: #eef0f4;
    --text: #1c1f26;
    --text-2: #5a6373;
    --text-3: #8d95a5;
    --line: rgba(18, 24, 40, 0.09);
    --line-strong: rgba(18, 24, 40, 0.16);
    --brand: #2f6bff;
    --brand-soft: rgba(47, 107, 255, 0.1);
    --warn: #c47b00;
    --warn-soft: rgba(196, 123, 0, 0.12);
    --danger: #d93636;
    --ok: #15915c;
    --pan: #0d9488;
    --magnet: #2f6bff;
    --quality: #7c3aed;

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 28px;

    --max: 1240px;
    --nav-h: 60px;

    --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

    color-scheme: light;
}

/* 暗色：跟随系统 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e1116;
        --bg-elev: #161a22;
        --bg-sunken: #1b2029;
        --text: #e8ecf3;
        --text-2: #9aa4b5;
        --text-3: #6f7a8c;
        --line: rgba(255, 255, 255, 0.09);
        --line-strong: rgba(255, 255, 255, 0.18);
        --brand: #5b8cff;
        --brand-soft: rgba(91, 140, 255, 0.16);
        --warn: #e0a33a;
        --warn-soft: rgba(224, 163, 58, 0.16);
        --danger: #ff6b6b;
        --ok: #4ad295;
        --pan: #2dd4bf;
        --magnet: #6a9bff;
        --quality: #a78bfa;
        color-scheme: dark;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body.is-locked {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
    cursor: pointer;
}

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-6);
}

/* ---------- 顶部导航 ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .topbar {
        background: var(--bg-elev);
    }
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    max-width: var(--max);
    height: var(--nav-h);
    margin: 0 auto;
    padding: 0 var(--sp-4);
}

.brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1.2;
}

.brand__name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.brand__sub {
    font-size: 11px;
    color: var(--text-3);
}

.nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.nav__link {
    padding: 6px 12px;
    border-radius: var(--r-sm);
    font-size: 14px;
    color: var(--text-2);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.nav__link:hover {
    background: var(--bg-sunken);
    color: var(--text);
}

.nav__link.is-active {
    color: var(--brand);
    font-weight: 600;
}

.nav__link--back {
    color: var(--text-3);
    font-size: 13px;
}

/* ---------- 搜索框 ---------- */
.searchbar {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
    width: 320px;
    max-width: 100%;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    transition: border-color 0.15s;
}

.searchbar:focus-within {
    border-color: var(--brand);
}

.searchbar__input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    /* 16px 是 iOS Safari 的下限：字号小于 16px 时，聚焦输入框
       会自动把整个页面放大，然后页面就出现横向滚动条，
       用户还得手动缩回去。桌面端看着字略大，但 16px 在 36px 高的
       容器里并不突兀，为移动端统一到 16px 是值得的。 */
    font-size: 16px;
    outline: none;
    /* 去掉 iOS 的原生内阴影和圆角，避免和容器样式打架 */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

.searchbar__input::placeholder {
    color: var(--text-3);
}

.searchbar__btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-size: 13px;
}

.searchbar__btn:hover {
    color: var(--brand);
}

.searchbar--lg {
    width: 100%;
    max-width: 560px;
    margin: var(--sp-4) auto 0;
    height: 46px;
    background: var(--bg-elev);
    border-radius: var(--r-md);
}

.searchbar--lg .searchbar__input {
    height: 44px;
    /* 同样不能低于 16px，否则 iOS 聚焦时整页放大 */
    font-size: 16px;
    padding: 0 16px;
}

.searchbar--lg .searchbar__btn {
    width: auto;
    height: 44px;
    padding: 0 26px;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
}

.searchbar--lg .searchbar__btn:hover {
    filter: brightness(1.08);
    color: #fff;
}

/* ---------- 首页 hero ---------- */
.hero {
    text-align: center;
    padding: var(--sp-6) 0 var(--sp-5);
}

.hero__title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hero__desc {
    margin: var(--sp-2) 0 0;
    color: var(--text-2);
    font-size: 14px;
}

/* ---------- 区块 ---------- */
.section {
    margin-top: var(--sp-6);
}

.section__head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.section__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.section__more {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-3);
}

.section__more:hover {
    color: var(--brand);
}

/* ---------- 海报网格 ---------- */
.grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-3);
}

.card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    cursor: pointer;
    outline: none;
    /* 按下时立刻缩小一点点：这是「点击已收到」最直接的反馈，
       不用等网络回来。配合顶栏进度条使用。 */
    transition: transform 0.1s ease;
}

.card:active {
    transform: scale(0.975);
}

.card:active .card__cover {
    border-color: var(--brand);
}

.card:focus-visible .card__cover {
    box-shadow: 0 0 0 2px var(--brand);
}

.card__cover {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: var(--r-md);
    overflow: hidden;
    background: linear-gradient(160deg, #3a4353 0%, #232a36 60%, #171c25 100%);
    border: 1px solid var(--line);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.card:hover .card__cover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
}

.card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.card__img.is-loaded {
    opacity: 1;
}

/* 图还没来 / 挂了时的片名底纹 */
.card__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
    word-break: break-word;
    transition: opacity 0.2s ease;
}

.card__ph.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* 角标：磁力 / 网盘 / 播放 / 画质 */
.card__badges {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    max-width: calc(100% - 12px);
}

.bg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 15px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bg i {
    font-style: normal;
}

.bg em {
    font-style: normal;
    font-weight: 400;
    opacity: 0.85;
    font-size: 10px;
}

.bg--pan {
    background: rgba(13, 148, 136, 0.92);
}

.bg--magnet {
    background: rgba(47, 107, 255, 0.92);
}

.bg--q {
    background: rgba(124, 58, 237, 0.92);
}

/* 底部评分 */
.card__scores {
    position: absolute;
    left: 6px;
    bottom: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 3px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0));
}

.score {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.score--db::before {
    content: "豆 ";
    font-weight: 400;
    opacity: 0.7;
    font-size: 10px;
}

.score--im::before {
    content: "IMDb ";
    font-weight: 400;
    opacity: 0.7;
    font-size: 10px;
}

.card__body {
    padding-top: 7px;
    min-width: 0;
}

.card__title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
    transition: color 0.15s;
}

.card:hover .card__title {
    color: var(--brand);
}

.card__meta {
    margin: 2px 0 0;
    font-size: 11px;
    color: var(--text-3);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- 页面头 / Tab / 筛选 ---------- */
.pagehead {
    padding: var(--sp-4) 0 var(--sp-2);
}

.pagehead__title {
    margin: 0 0 var(--sp-3);
    font-size: 22px;
    font-weight: 800;
}

.pagehead__desc {
    margin: 0 0 var(--sp-3);
    color: var(--text-2);
    font-size: 13px;
}

.tabs {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}

.tabs__gap {
    width: 1px;
    height: 16px;
    background: var(--line-strong);
    margin: 0 var(--sp-2);
}

.tabs__item {
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-2);
    border: 1px solid transparent;
}

.tabs__item:hover {
    background: var(--bg-sunken);
}

.tabs__item.is-active {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

.filters {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-3);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-3);
}

.filters__row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: 5px 0;
}

.filters__row + .filters__row {
    border-top: 1px dashed var(--line);
}

.filters__label {
    flex: 0 0 auto;
    width: 40px;
    padding-top: 4px;
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
}

.filters__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

/* 筛选项：平铺的小胶囊，点一下直接跳转 */
.fchip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    font-size: 13px;
    line-height: 1;
    color: var(--text-2);
    border: 1px solid transparent;
    background: transparent;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.fchip:hover {
    background: var(--bg-sunken);
    color: var(--text);
}

.fchip.is-active {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

/* 折叠的项默认不显示，点「展开」再出现 */
.fchip.is-folded {
    display: none;
}

.filters__row.is-expanded .fchip.is-folded {
    display: inline-flex;
}

.fchip--more {
    color: var(--text-3);
    border-color: var(--line);
    cursor: pointer;
}

.fchip--more:hover {
    color: var(--brand);
    border-color: var(--brand);
}

.filters__row--reset {
    border-top: 1px dashed var(--line);
    padding-top: var(--sp-2);
    margin-top: 2px;
}

.filters__reset {
    font-size: 12px;
    color: var(--danger);
}

.filters__reset:hover {
    text-decoration: underline;
}

/* ---------- 分页 ---------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}

.pager__btn {
    padding: 6px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-elev);
    font-size: 13px;
    color: var(--text);
}

.pager__btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.pager__btn.is-disabled {
    color: var(--text-3);
    pointer-events: none;
    opacity: 0.6;
}

.pager__info {
    font-size: 13px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

/* ---------- 空态 ---------- */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
}

.empty__text {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.empty__hint {
    margin: 0;
    font-size: 13px;
    color: var(--text-3);
}

.empty__btn {
    margin-top: var(--sp-2);
    padding: 8px 18px;
    border-radius: var(--r-sm);
    background: var(--brand);
    color: #fff;
    font-size: 13px;
}

/* ---------- 搜索结果行 ---------- */
.resultlist {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.rrow {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}

.rrow:hover {
    border-color: var(--line-strong);
    transform: translateX(2px);
}

.rrow__cover {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    aspect-ratio: 2 / 3;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: linear-gradient(160deg, #3a4353, #171c25);
}

.rrow__cover .card__ph {
    font-size: 10px;
    padding: 4px;
}

.rrow__body {
    flex: 1;
    min-width: 0;
}

.rrow__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.rrow__year {
    font-weight: 400;
    color: var(--text-3);
    font-size: 13px;
}

.rrow__badges {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: 5px;
}

.rrow__badges .score {
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
}

.rrow__tag {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--text-3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rrow__arrow {
    flex: 0 0 auto;
    color: var(--text-3);
    font-size: 20px;
}

/* ---------- 详情 ---------- */
.detail {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--sp-5);
    padding-top: var(--sp-4);
}

.detail__cover {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: var(--r-md);
    overflow: hidden;
    background: linear-gradient(160deg, #3a4353, #171c25);
    border: 1px solid var(--line);
}

.card__ph--big {
    font-size: 14px;
    padding: 16px;
}

.detail__title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    word-break: break-word;
}

.detail__year {
    font-weight: 400;
    color: var(--text-3);
    font-size: 18px;
}

.detail__alias {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-3);
}

.detail__status {
    margin: var(--sp-2) 0 0;
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r-sm);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 12px;
}

.meta {
    margin: var(--sp-3) 0 0;
}

.meta__row {
    display: flex;
    gap: var(--sp-2);
    padding: 2px 0;
    font-size: 13px;
}

.meta__row dt {
    flex: 0 0 auto;
    width: 44px;
    color: var(--text-3);
}

.meta__row dd {
    margin: 0;
    flex: 1;
    min-width: 0;
    color: var(--text-2);
    word-break: break-word;
}

/* ---------- 主演折叠 ----------
 * 教父的做法：主演默认只有一行，超出省略，点「展开」看全部。
 * 一部剧主演常 12+ 人，全铺开会把「类型/地区/语言」推到首屏之外。 */
.meta__actors {
    line-height: 1.6;
}

.meta__actors.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meta__row--actors {
    flex-wrap: wrap;
}

.meta__more {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand);
    font-size: 13px;
    cursor: pointer;
}

.meta__more:hover {
    text-decoration: underline;
}

/* ---------- 季数切换 ----------
 * 上游只对多季作品给 xle 字段，单季不渲染这个块。
 * 交互做成「按钮 + 下拉」：季数少（2~3）时下拉比一排 chip 更省空间，
 * 剧集多的作品有时能到 10 季以上，chip 会换成好几行。 */
.meta__row--season dd {
    display: flex;
    align-items: center;
}

.seasons {
    position: relative;
    display: inline-block;
}

.seasons__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-elev);
    color: var(--text);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.seasons__btn:hover,
.seasons__btn[aria-expanded="true"] {
    border-color: var(--brand);
}

.seasons__caret {
    flex: 0 0 auto;
    color: var(--text-3);
    transition: transform 0.15s ease;
}

.seasons__btn[aria-expanded="true"] .seasons__caret {
    transform: rotate(180deg);
}

.seasons__list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-height: 280px;
    margin: 0;
    padding: 4px;
    list-style: none;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-elev);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
}

.seasons__item {
    display: block;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.seasons__item:hover {
    background: var(--bg-sunken);
    color: var(--text);
}

.seasons__item.is-active {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

/* ---------- 详细信息折叠 ---------- */
.meta__extra {
    /* 折叠区展开后与上面的行保持同样的间距节奏 */
    padding-top: 2px;
}

.meta__extra-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--brand);
    font-size: 13px;
    cursor: pointer;
}

.meta__extra-toggle:hover {
    text-decoration: underline;
}

.meta__extra-toggle svg {
    transition: transform 0.15s ease;
}

.meta__extra-toggle[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

/* 评分：紧凑的固定宽度卡片，超出横向滚动
 * 固定宽度让多个评分牌并排时对齐；横滑而不是换行，不拉高页面。 */
.ratings {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: var(--sp-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
}

.ratings::-webkit-scrollbar {
    height: 6px;
}

.ratings::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 3px;
}

.rating {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* 用内容撑开，不再写死宽度：
       豆瓣+IMDb 两个并排时，「154,560 人评分」这种长数字才会被拉伸，
       写死 124px 反而两个加起来占满整行，看着很空。 */
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--bg-elev);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

a.rating:hover {
    border-color: var(--brand);
    transform: translateY(-1px);
}

/* 分数：缩小字号、收紧行高，整体更紧凑 */
.rating__score {
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    color: var(--warn);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* 分数高低用颜色区分（教父的观感）：
 *   8.0+ 绿（优秀）  7.0~7.9 橙（好评）  6.0~6.9 黄（一般）  <6.0 灰（偏低）
 * 只对「有分数」的生效；"--" 走 is-empty，用中性灰。 */
.rating__score.is-good { color: #15915c; }
.rating__score.is-fair { color: var(--warn); }
.rating__score.is-mid  { color: #b8860b; }
.rating__score.is-low  { color: var(--text-3); }

/* 没有分数时用中性色，避免 "--" 还显得像高分 */
.rating__score.is-empty {
    color: var(--text-3);
    font-size: 17px;
}

.rating__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.rating__source {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    line-height: 1.2;
}

.rating__count {
    font-size: 10px;
    color: var(--text-3);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-2);
    white-space: pre-line;
}

/* 简介折叠：默认 4 行，超出显示「展开全部」 */
.summary.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.summary__more {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand);
    font-size: 13px;
    cursor: pointer;
}

.summary__more:hover {
    text-decoration: underline;
}

/* ---------- 资源 Tab ---------- */
.res-tabs {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--sp-3);
}

.res-tab {
    position: relative;
    padding: 8px 16px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-size: 14px;
}

.res-tab:hover {
    color: var(--text);
}

.res-tab.is-active {
    color: var(--brand);
    font-weight: 600;
}

.res-tab.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: var(--brand);
    border-radius: 2px;
}

.res-body {
    min-height: 120px;
}

/* ---------- 资源区加载遮罩 ----------
 * 详情页的资源是异步接口拉的（/api/father/resources），
 * 慢的时候要 1~2 秒。骨架屏只说明「有内容要来」，
 * 再加一层居中转圈 + 文字，明确告诉用户是在等接口。 */
.res-body {
    position: relative;
    min-height: 120px;
}

.res-loading-mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 28px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--r-md);
}

.res-loading-mask__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: var(--r-md);
    background: var(--bg-elev);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.res-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-6) 0;
    color: var(--text-3);
    font-size: 13px;
}

.spinner {
    width: 26px;
    height: 26px;
    border: 2.5px solid var(--line-strong);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 网盘类型横向 Tab */
.pan-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--sp-3);
}

.pan-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-elev);
    color: var(--text-2);
    font-size: 13px;
    transition: border-color 0.14s, color 0.14s, background 0.14s;
}

.pan-tab:hover {
    border-color: var(--line-strong);
    color: var(--text);
}

.pan-tab.is-active {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

.pan-tab__name {
    line-height: 1;
}

.pan-tab__count {
    padding: 0 5px;
    border-radius: 3px;
    background: var(--bg-sunken);
    color: var(--text-3);
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}

.pan-tab.is-active .pan-tab__count {
    background: rgba(255, 255, 255, 0.55);
    color: var(--brand);
}


/* 一次只显示一个盘的列表 */
.pan-panel[hidden] {
    display: none;
}

.pan-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-elev);
}

.pan-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 9px var(--sp-3);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.12s;
}

.pan-item:last-child {
    border-bottom: 0;
}

.pan-item:hover {
    background: var(--bg-sunken);
}

.pan-item.is-disabled {
    opacity: 0.66;
}

.pan-item.is-busy {
    pointer-events: none;
    opacity: 0.7;
}

/* 标题 + 元信息（时间 / 分享者）竖排 */
.pan-item__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 标题最多两行，超出才省略。
 * 原来 white-space:nowrap + ellipsis 只给一行，而分享标题普遍很长
 * （「🔥🔥🔥【片名 (2026)】【1080P+4K】【国语中字】」这类），
 * 一行会把最关键的画质/集数砍掉。 */
.pan-item__name {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.pan-item__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 自有资源（我们自己发布的分享）----------
 * 这类链接本来就指向我们的分享，点开直接可用，不需要转存，
 * 所以用品牌色背景 +「推荐」徽章把它突出出来，并加一点呼吸动效，
 * 让用户在 100+ 条的列表里一眼看到、也知道它能点。
 *
 * 注意：绝不能再叠加 .is-disabled（那会 opacity 0.66 显得点不动）。 */
.pan-item.is-own {
    background: var(--brand-soft);
    box-shadow: inset 3px 0 0 var(--brand);
}

.pan-item.is-own:hover {
    background: var(--brand-soft);
    filter: brightness(0.97);
}

/* 徽章放在标题外侧（不在 line-clamp 的行槽里），
   否则会吃掉一行，把标题提前截断。 */
.pan-item__flag {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 1px;
    padding: 0 6px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--brand), var(--pan));
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(13, 148, 136, 0.35);
    animation: flag-breathe 2.4s ease-in-out infinite;
}

@keyframes flag-breathe {
    0%, 100% { box-shadow: 0 1px 4px rgba(13, 148, 136, 0.30); transform: scale(1); }
    50%      { box-shadow: 0 2px 10px rgba(13, 148, 136, 0.55); transform: scale(1.04); }
}

/* 尊重「减少动效」偏好：不呼吸，颜色加深以保持可辨识度 */
@media (prefers-reduced-motion: reduce) {
    .pan-item__flag {
        animation: none;
        box-shadow: 0 1px 5px rgba(13, 148, 136, 0.5);
    }
}

/* 自有资源的「打开」按钮：比普通「转存」更醒目，暗示可直点 */
.pan-item.is-own .pan-item__act {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
}

.pan-item.is-own:hover .pan-item__act {
    filter: brightness(1.06);
}

.pan-item__meta i {
    font-style: normal;
    opacity: 0.5;
}

/* 「今天 / 昨天 / 3天前」这类相对时间，稍作强调 */
.pan-item__time {
    color: var(--text-2);
}

.pan-item__code {
    flex: 0 0 auto;
    padding: 0 5px;
    border-radius: 3px;
    background: var(--bg-sunken);
    color: var(--text-3);
    font-size: 11px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.pan-item__act {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: var(--r-sm);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
}

/* 磁力 */
.magnet-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-elev);
}

.magnet-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px var(--sp-3);
    border-bottom: 1px solid var(--line);
}

.magnet-item:last-child {
    border-bottom: 0;
}

.magnet-item__name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.magnet-item__meta {
    flex: 0 0 auto;
    display: flex;
    gap: var(--sp-2);
    font-size: 11px;
    color: var(--text-3);
}

.magnet-item__meta em {
    font-style: normal;
}

.magnet-item__copy {
    flex: 0 0 auto;
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-2);
    font-size: 12px;
}

.magnet-item__copy:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* ---------- 激活页 ---------- */
.activate {
    display: grid;
    place-items: center;
    min-height: 60vh;
    padding: var(--sp-6) 0;
}

.activate__box {
    width: 100%;
    max-width: 420px;
    padding: var(--sp-6) var(--sp-5);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-align: center;
}

.activate__anim {
    display: grid;
    place-items: center;
    margin-bottom: var(--sp-4);
    color: var(--brand);
}

.activate__anim.is-error {
    color: var(--danger);
}

.activate__ring {
    width: 56px;
    height: 56px;
}

.activate__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.activate__desc {
    margin: var(--sp-2) 0 var(--sp-4);
    font-size: 13px;
    color: var(--text-2);
}

.activate__bar {
    height: 6px;
    border-radius: 3px;
    background: var(--bg-sunken);
    overflow: hidden;
}

.activate__fill {
    display: block;
    height: 100%;
    width: 2%;
    border-radius: 3px;
    background: var(--brand);
    transition: width 0.25s ease;
}

.activate__hint {
    margin: var(--sp-2) 0 0;
    min-height: 18px;
    font-size: 12px;
    color: var(--text-3);
}

.activate__actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: center;
    margin-top: var(--sp-4);
}

/* ---------- 弹窗 ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: var(--sp-4);
    background: rgba(10, 14, 20, 0.55);
    backdrop-filter: blur(3px);
}

.modal__box {
    width: 100%;
    max-width: 420px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-elev);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    overflow: hidden;
}

.modal__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
}

.modal__title {
    font-size: 15px;
    font-weight: 700;
}

.modal__close {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-3);
    font-size: 14px;
}

.modal__close:hover {
    background: var(--bg-sunken);
    color: var(--text);
}

.modal__body {
    padding: var(--sp-4);
    overflow-y: auto;
}

.modal__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-5) 0;
    color: var(--text-3);
    font-size: 13px;
}

.resbox {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.resbox__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    word-break: break-word;
}

.resbox__badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tag {
    padding: 1px 7px;
    border-radius: 3px;
    background: var(--bg-sunken);
    color: var(--text-2);
    font-size: 11px;
    line-height: 18px;
}

.tag--brand {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 600;
}

.tag--warn {
    background: var(--warn-soft);
    color: var(--warn);
}

.resbox__qr {
    align-self: center;
    padding: 10px;
    border-radius: var(--r-md);
    background: #fff;
    line-height: 0;
    min-width: 168px;
    min-height: 168px;
    display: grid;
    place-items: center;
}

.resbox__qr.is-hidden {
    display: none;
}

.resbox__hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.6;
    text-align: center;
}

.resbox__url {
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    overflow: hidden;
}

.resbox__url code {
    display: block;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resbox__foot {
    display: flex;
    gap: var(--sp-2);
    /* 按钮平分整行、等高。原来按钮按内容宽度靠左挤在一起，
       一个「复制链接」一个「打开链接」长短不一，右边留一大块空白，
       看着很别扭。 */
    margin-top: var(--sp-1);
}

.resbox__foot .btn {
    flex: 1 1 0;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 主按钮稍作强调，两个按钮视觉上分主次但不失衡 */
.resbox__foot .btn--primary {
    font-weight: 600;
}

.resbox--error {
    align-items: flex-start;
}

/* ---------- 按钮 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-elev);
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
}

.btn:hover {
    border-color: var(--line-strong);
}

.btn--primary {
    border-color: transparent;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
}

.btn--primary:hover {
    filter: brightness(1.08);
}

/* ---------- 提示 ---------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    z-index: 120;
    transform: translate(-50%, 10px);
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(24, 30, 40, 0.94);
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

.toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

.toast--error {
    background: rgba(200, 45, 45, 0.95);
}

.copy-sink {
    position: fixed;
    left: -9999px;
    opacity: 0;
}

/* ---------- 页脚 ---------- */
.foot {
    margin-top: var(--sp-6);
    padding: var(--sp-5) var(--sp-4);
    border-top: 1px solid var(--line);
    text-align: center;
}

.foot__inner {
    max-width: var(--max);
    margin: 0 auto;
}

.foot__line {
    margin: 0;
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.8;
}

.foot__line a {
    color: var(--text-2);
    text-decoration: underline;
}

.foot__line--muted {
    margin-top: 4px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
    .grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .detail {
        grid-template-columns: 168px minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .nav {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 720px) {
    .topbar__inner {
        flex-wrap: wrap;
        height: auto;
        padding: var(--sp-2) var(--sp-3);
        gap: var(--sp-2);
    }

    .brand__sub {
        display: none;
    }

    /* 手机上只保留一个搜索框：
       首页正文里已经有 hero 那个大的，导航栏这个再显示就重复了。
       用 :has() 判断「页面上是否存在 hero 搜索框」，不需要额外传模板变量。
       不支持的浏览器会保留两个搜索框（功能不受影响，只是略冗余）。 */
    body:has(.hero .searchbar) .topbar .searchbar {
        display: none;
    }

    .searchbar {
        order: 3;
        width: 100%;
        margin-left: 0;
    }

    .nav__link {
        padding: 5px 9px;
        font-size: 13px;
    }

    .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-3) var(--sp-2);
    }

    .hero__title {
        font-size: 21px;
    }

    .hero {
        padding: var(--sp-4) 0 var(--sp-3);
    }

    .detail {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: var(--sp-3);
    }

    .detail__title {
        font-size: 18px;
    }

    .detail__year {
        font-size: 14px;
    }

    .meta__row {
        font-size: 12px;
    }

    .meta__row dt {
        width: 38px;
    }

    .rating {
        /* 移动端也用内容撑开。原来写死 136px，两个评分牌加起来
           几乎占满整屏，看起来又宽又空。 */
        flex: 0 0 auto;
        padding: 5px 9px;
        gap: 6px;
    }

    .rating__score {
        font-size: 16px;
    }

    .rating__count {
        font-size: 10px;
    }

    .rating__count {
        font-size: 10px;
    }

    .filters {
        padding: var(--sp-2);
    }

    .filters__row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 6px 0;
    }

    /* 手机上标签横排、不再占固定宽度，否则「类型」会被挤成竖排 */
    .filters__label {
        width: auto;
        padding-top: 0;
        font-size: 11px;
    }

    .filters__opts {
        gap: 3px;
    }

    .fchip {
        height: 24px;
        padding: 0 8px;
        font-size: 12px;
    }

    .rrow__cover {
        width: 52px;
    }

    .rrow__title {
        font-size: 14px;
    }

    .pan-item__name {
        font-size: 12px;
    }

    .magnet-item {
        flex-wrap: wrap;
        gap: var(--sp-1);
    }

    .magnet-item__name {
        flex: 1 0 100%;
    }

    .res-tab {
        padding: 7px 11px;
        font-size: 13px;
    }
}

@media (max-width: 420px) {
    /* 手机竖屏保持 3 列：2 列会让海报过大、一屏看不到几张，
       3 列刚好一眼扫到一行，卡片也不会挤（390px 下每张约 116px）。 */
    .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .card__title {
        font-size: 12px;
    }

    .card__meta {
        font-size: 10px;
    }

    /* 角标在窄屏上只留数字，省空间 */
    .bg em {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   加载反馈
   ========================================================================== */

/* ---------- 页面入场 / 离场 ---------- */

/*
 * 入场：内容从下方 12px 淡入。
 * 之所以要这个：页面是服务端渲染 + 整页跳转，浏览器默认「白屏后突然出现」，
 * 用户感知不到系统在干活。给一点位移和透明度过渡，成本几乎为零。
 * 用 .is-ready 而不是 :root 直接写，是为了保证初始态先渲染一帧动画才生效。
 */
#main,
.foot {
    opacity: 0;
    transform: translateY(12px);
}

/* 首屏骨架屏存在时，主内容先别淡入 —— 否则会和骨架屏叠在一起「双层闪」 */
.is-booting #main,
.is-booting .foot {
    opacity: 0;
}

.is-ready #main,
.is-ready .foot {
    opacity: 1;
    transform: none;
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 顶部导航不参与位移，避免整页抖动 */
.topbar {
    opacity: 0;
}

.is-ready .topbar {
    opacity: 1;
    transition: opacity 0.25s ease;
}

/* 离场：被点元素高亮 + 整页轻微淡出，暗示「正在离开」 */
.is-navigating #main {
    opacity: 0.55;
    transition: opacity 0.18s ease;
}

a.is-loading,
[data-dir].is-loading {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

a.is-loading {
    pointer-events: none;
}

/* 顶部进度条：点击链接立刻出现，跳到新页面后被清掉 */
.loadbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    /* 原来 2px 太细，在 1320px 宽的页面里几乎看不见 */
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--brand), var(--pan));
    /* 加一点光晕，让它在浅色背景上也够醒目 */
    box-shadow: 0 0 8px rgba(13, 148, 136, 0.45);
    opacity: 0;
    pointer-events: none;
}

.loadbar.is-on {
    opacity: 1;
    animation: loadbar-run 1.4s ease-out forwards;
}

@keyframes loadbar-run {
    0%   { transform: scaleX(0); }
    40%  { transform: scaleX(0.55); }
    70%  { transform: scaleX(0.78); }
    100% { transform: scaleX(0.92); }
}

/* ---------- 跳转移遮罩 ----------
   只盖住内容区顶部的一小块 + 居中一个小转圈，不整屏遮黑：
   整屏遮黑会让人以为页面出问题了，而这里只是「正在换页」。
   淡入有 120ms 延迟，快速跳转（缓存命中）时根本不会闪出来。 */
.navmask {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    transition-delay: 0.12s;
}

.navmask.is-on {
    opacity: 1;
    visibility: visible;
    /* 转圈出现时要能吃掉点击，避免连点两次跳两次 */
    pointer-events: auto;
}

.navmask__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    border-radius: var(--r-md);
    background: var(--bg-elev);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    transform: scale(0.96);
    transition: transform 0.18s ease;
}

.navmask.is-on .navmask__box {
    transform: scale(1);
}

.navmask__text {
    margin: 0;
    font-size: 12px;
    color: var(--text-2);
}

/* 转圈：与详情页资源加载复用同一套观感（@keyframes spin 已在上面定义） */
/* 三个点依次跳动 —— 站点统一的加载语言，
   首屏骨架屏（head 内联）、跳转遮罩、资源加载都用它 */
.navmask__dots {
    display: flex;
    gap: 6px;
}

.navmask__dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0.25;
    animation: dot-pulse 1.1s ease-in-out infinite;
}

.navmask__dots span:nth-child(2) {
    animation-delay: 0.16s;
}

.navmask__dots span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes dot-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
    40%           { opacity: 1;    transform: scale(1); }
}

/* 尊重「减少动效」偏好：点不再跳动 */
@media (prefers-reduced-motion: reduce) {
    .navmask__dots span {
        animation: none;
        opacity: 0.6;
    }
    .navmask__box {
        transition: none;
    }
}

/* ---------- 转存中的全屏遮罩 ----------
 * 转存要等网盘侧建任务 + 轮询，通常 2~10 秒，慢的时候更久。
 * 只把某行文字改成「转存中…」用户根本注意不到，会给「点了没反应」的观感。
 * 这里给一个明确的持续等待态。 */
.busy {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.busy.is-on {
    opacity: 1;
}

.busy__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    padding: 20px 26px;
    border-radius: var(--r-lg);
    background: var(--bg-elev);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22);
    transform: scale(0.96);
    transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.busy.is-on .busy__box {
    transform: scale(1);
}

.busy__text {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.busy__hint {
    margin: 0;
    font-size: 11px;
    color: var(--text-3);
}

/* 骨架屏 */
.skel-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-3);
}

.skel-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.skel-cover {
    aspect-ratio: 2 / 3;
    border-radius: var(--r-md);
    background: var(--bg-sunken);
    position: relative;
    overflow: hidden;
}

.skel-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    transform: translateX(-100%);
    animation: skel-sweep 1.15s ease-in-out infinite;
}

.skel-line {
    height: 11px;
    border-radius: 3px;
    background: var(--bg-sunken);
}

.skel-line--short {
    width: 55%;
    height: 9px;
}

@keyframes skel-sweep {
    100% { transform: translateX(100%); }
}

@media (max-width: 1080px) {
    .skel-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .skel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .skel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
    .loadbar.is-on { animation: none; transform: scaleX(0.9); }
    .skel-cover::after { animation: none; }
}

/* 资源列表骨架 */
.res-skel__row {
    height: 40px;
    border-radius: var(--r-sm);
    background: var(--bg-sunken);
    margin-bottom: 6px;
    position: relative;
    overflow: hidden;
}

.res-skel__row::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transform: translateX(-100%);
    animation: skel-sweep 1.15s ease-in-out infinite;
}

/* ==========================================================================
   首页 banner 轮播
   背景用横版图（/mv/{id}_i/800.webp），文字叠在右侧留出的暗区上，
   所以左侧压一层从右到左的渐变，保证文字可读。
   ========================================================================== */

.slidebox {
    position: relative;
    margin: var(--sp-4) 0 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-sunken);
    isolation: isolate;
}

.slidebox__track {
    position: relative;
    aspect-ratio: 16 / 7;
    min-height: 200px;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s;
}

.slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.slide__link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
}

.slide__bg {
    position: absolute;
    inset: 0;
}

.slide__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.slide__img.is-loaded {
    opacity: 1;
}

/* 压暗层：左深右浅，文字放左边 */
.slide__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 11, 16, 0.92) 0%, rgba(8, 11, 16, 0.72) 38%, rgba(8, 11, 16, 0.16) 72%, rgba(8, 11, 16, 0.05) 100%),
        linear-gradient(0deg, rgba(8, 11, 16, 0.75) 0%, rgba(8, 11, 16, 0) 45%);
}

.slide__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    height: 100%;
    max-width: 58%;
    padding: var(--sp-6);
    box-sizing: border-box;
}

.slide__title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.slide__alias {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.76);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.slide__meta {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.66);
}

.slide__desc {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.slide__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: var(--sp-2);
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}

.slide__link:hover .slide__cta {
    background: rgba(255, 255, 255, 0.28);
}

/* 圆点 */
.slidebox__dots {
    position: absolute;
    right: var(--sp-4);
    bottom: var(--sp-3);
    z-index: 3;
    display: flex;
    gap: 6px;
}

.slidebox__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: width 0.2s, background 0.2s;
}

.slidebox__dot.is-active {
    width: 18px;
    border-radius: 4px;
    background: #fff;
}

@media (max-width: 860px) {
    .slidebox__track {
        aspect-ratio: 16 / 9;
    }

    .slide__body {
        max-width: 76%;
        padding: var(--sp-4);
    }

    .slide__title {
        font-size: 20px;
    }

    .slide__desc {
        -webkit-line-clamp: 2;
        font-size: 12px;
    }
}

@media (max-width: 720px) {
    .slidebox {
        margin-top: var(--sp-3);
    }

    .slidebox__track {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }

    /* 手机上铺满整宽，文字压在底部 */
    .slide__body {
        max-width: 100%;
        justify-content: flex-end;
        padding: var(--sp-3);
        padding-bottom: var(--sp-6);
    }

    .slide__scrim {
        background:
            linear-gradient(0deg, rgba(8, 11, 16, 0.92) 0%, rgba(8, 11, 16, 0.55) 42%, rgba(8, 11, 16, 0.08) 78%);
    }

    .slide__title {
        font-size: 17px;
        -webkit-line-clamp: 2;
    }

    .slide__alias,
    .slide__desc {
        display: none;
    }

    .slide__meta {
        font-size: 11px;
    }

    .slide__cta {
        padding: 5px 12px;
        font-size: 12px;
    }

    .slidebox__dots {
        right: 50%;
        transform: translateX(50%);
        bottom: var(--sp-2);
    }
}

/* ------------------------------------------------------------------
 * iOS 聚焦放大兜底
 *
 * iOS Safari 在输入框字号 < 16px 时会自动放大整个页面，放大后
 * 页面出现横向滚动条，用户还得双指缩回去 —— 体验很差。
 *
 * 这是全局兜底：以后新增任何输入框（搜索框、筛选输入、后台表单）
 * 都不会再触发。只作用于移动端，桌面端保持原有字号。
 * ------------------------------------------------------------------ */
@media (max-width: 720px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px;
    }
}