/* JAV.CC — 前台主题
   设计目标：Netflix + FANZA + Apple TV。高级深色 / 玻璃质感 / 移动端优先。 */

:root {
    /* 东京夜生活配色：近黑背景 + 霓虹粉 + 琥珀辅光 */
    --bg: #050509;
    --bg-2: #090912;
    --bg-elev: #0c0e16;          /* 卡片实底 */
    --glass: rgba(13, 15, 24, 0.55);   /* 黑色玻璃 */
    --glass-strong: rgba(8, 9, 16, 0.78);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glow-border: rgba(255, 43, 122, 0.30); /* 粉色微光边 */
    --text: #ffffff;
    --text-dim: #9aa0ad;
    --accent: #ff2b7a;           /* 霓虹粉（主色） */
    --accent-2: #ff9f1c;         /* 琥珀（辅助色） */
    --accent-soft: rgba(255, 43, 122, 0.14);
    --ok: #22c55e;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
    --glow: 0 10px 30px rgba(255, 43, 122, 0.28);
    --maxw: 1200px;
    --gap: 14px;
    --botnav-h: 60px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background:
        radial-gradient(1100px 560px at 82% -8%, rgba(255, 43, 122, 0.20), transparent 60%),
        radial-gradient(900px 520px at -12% 4%, rgba(255, 159, 28, 0.12), transparent 55%),
        radial-gradient(700px 700px at 50% 120%, rgba(124, 92, 255, 0.10), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: "Noto Sans JP", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* ---------- Header (glass, sticky) ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    background: rgba(5, 5, 9, 0.78);
    border-bottom: 1px solid var(--glass-border);
}
.site-header .bar { display: flex; align-items: center; gap: 14px; height: 56px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .3px; font-size: 18px; }
.brand img { height: 28px; }
.header-right { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* App 风分类导航：图标 + 文字，单行横滑（PC/手机通用） */
.nav-bar { border-top: 1px solid var(--glass-border); }
.nav-strip {
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: 4px;
    overflow-x: auto; white-space: nowrap; padding: 6px 16px;
}
.nav-item {
    position: relative; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 5px 12px 8px; border-radius: 14px; min-width: 56px;
    color: var(--text-dim); transition: color .15s ease, background .15s ease;
}
.nav-ico { width: 22px; height: 22px; flex: 0 0 auto; }
.nav-txt { font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; }
.nav-item:hover { color: var(--text); background: var(--glass); }
.nav-item.is-active { color: var(--accent); background: var(--accent-soft); }
.nav-item.is-active .nav-ico { filter: drop-shadow(0 0 8px rgba(255,43,122,.55)); }
.nav-item.is-active::after {
    content: ""; position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%);
    width: 20px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    box-shadow: 0 2px 8px rgba(255,43,122,.5);
}
@media (min-width: 768px) {
    .nav-item { flex-direction: row; gap: 7px; padding: 7px 14px; }
    .nav-txt { font-size: 13px; }
    .nav-item.is-active::after { width: 70%; }
}
/* UI Phase 50：压缩移动端导航高度 + カテゴリー/更多 下拉 */
@media (max-width: 767px) {
    .nav-strip { padding: 3px 12px; gap: 2px; }
    .nav-item { flex-direction: row; gap: 6px; padding: 6px 11px; min-width: 0; border-radius: 11px; }
    .nav-ico { width: 17px; height: 17px; }
    .nav-txt { font-size: 12px; }
    .nav-item.is-active::after { display: none; }
}
.nav-dd { position: relative; flex: 0 0 auto; }
.nav-dd > summary { list-style: none; cursor: pointer; }
.nav-dd > summary::-webkit-details-marker { display: none; }
.nav-dd[open] > summary { color: var(--accent); background: var(--accent-soft); }
.nav-dd-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 156px;
    display: flex; flex-direction: column; gap: 2px; padding: 8px;
    background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 14px;
    box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav-dd-end .nav-dd-menu { left: auto; right: 0; }
.nav-dd-menu a { padding: 9px 13px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.nav-dd-menu a:hover { background: var(--glass); color: var(--accent); }

/* 语言下拉（国旗 + 箭头，问题 2） */
.lang-dd { position: relative; }
.lang-dd > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px; border-radius: 999px;
    background: var(--glass); border: 1px solid var(--glass-border); font-size: 16px; line-height: 1;
}
.lang-dd > summary::-webkit-details-marker { display: none; }
.lang-dd[open] > summary { border-color: var(--glow-border); }
.lang-dd .lg-caret { font-size: 10px; color: var(--text-dim); transition: transform .15s ease; }
.lang-dd[open] .lg-caret { transform: rotate(180deg); }
.lang-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    min-width: 158px; padding: 6px; border-radius: 14px;
    background: var(--glass-strong); border: 1px solid var(--glass-border);
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px;
}
.lang-menu a {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px;
    font-size: 13px; color: var(--text-dim); white-space: nowrap;
}
.lang-menu a:hover, .lang-menu a.is-active { color: var(--text); background: var(--accent-soft); }
/* 国旗 SVG（跨平台一致，Windows 不渲染 emoji 国旗） */
.flag-svg { display: block; flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.lang-dd > summary .flag-svg { width: 22px; height: 15px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 14px;
    border: 1px solid var(--glass-border); cursor: pointer; transition: transform .12s ease, filter .12s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; color: #fff; box-shadow: 0 8px 24px rgba(255, 46, 126, .35); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-glass { background: var(--glass); color: var(--text); }
.btn-glass:hover { background: rgba(255, 255, 255, .12); }
.btn-fanza { background: #ff2e7e; border: none; color: #fff; }
.btn-dmm { background: #e7363c; border: none; color: #fff; }
.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.hero { position: relative; border-radius: var(--radius); overflow: hidden; margin: 18px 0; min-height: 320px; display: flex; align-items: flex-end; box-shadow: var(--shadow); }
.hero-backdrop { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,15,.95) 0%, rgba(10,10,15,.45) 45%, rgba(10,10,15,.1) 100%); }
.hero-content { position: relative; z-index: 2; padding: 22px; max-width: 680px; }
.hero-content h1 { margin: 0 0 8px; font-size: 26px; line-height: 1.15; }
.hero-content p { color: var(--text-dim); margin: 0 0 16px; }
.hero-badges { display: flex; gap: 8px; margin-bottom: 12px; }

/* ====================================================================
   运营型首页（第五阶段）：Hero 轮播 + 横版卡片
   ==================================================================== */

/* ---------- Hero 轮播 ---------- */
.hero-carousel {
    position: relative; overflow: hidden;
    border-radius: var(--radius);
    margin: 16px 0 8px;
    box-shadow: var(--shadow);
    background: var(--bg-elev);
}
.hero-track { position: relative; }
.hero-slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .6s ease;
    display: flex; align-items: flex-end;
}
.hero-slide.is-active { position: relative; opacity: 1; visibility: visible; z-index: 1; }
.hero-slide .hero-backdrop {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transform: scale(1.06);
}
.hero-slide::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(0deg, rgba(10,10,15,.96) 2%, rgba(10,10,15,.5) 45%, rgba(10,10,15,.15) 100%),
        linear-gradient(90deg, rgba(10,10,15,.85) 0%, rgba(10,10,15,.2) 55%, transparent 100%);
}
.hero-inner {
    position: relative; z-index: 2;
    display: flex; align-items: flex-end; gap: 16px;
    padding: 18px 18px 20px; min-height: 247px; width: 100%; /* Phase 22：Hero 缩小 ~35% */
}
.hero-cover {
    flex: 0 0 auto; width: 96px; border-radius: 12px;
    overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.6);
    border: 1px solid rgba(255,255,255,.18);
    display: block;
}
.hero-cover img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.hero-text { max-width: 660px; }
/* PICK UP 标签 */
.hero-pickup {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
    color: #fff; padding: 4px 11px; border-radius: 999px; margin-bottom: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 6px 18px rgba(255,46,126,.4);
}
.hero-text h1 { margin: 6px 0 8px; font-size: 27px; font-weight: 800; line-height: 1.14; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.hero-text p { color: rgba(245,245,247,.78); margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-actress { color: var(--accent); font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; color: #fff; }

.hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,.45); color: #fff; border: 1px solid var(--glass-border);
    font-size: 22px; line-height: 1; cursor: pointer;
    backdrop-filter: blur(6px); display: none;
}
.hero-nav:hover { background: rgba(0,0,0,.7); }
.hero-nav.prev { left: 12px; } .hero-nav.next { right: 12px; }
.hero-dots { position: absolute; z-index: 5; bottom: 12px; right: 16px; display: flex; gap: 8px; }
.hero-dot { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: none; cursor: pointer; background: rgba(255,255,255,.4); transition: width .2s ease, background .2s ease; }
.hero-dot.is-active { width: 22px; background: var(--accent); }

/* ---------- 横版卡片（运营行） ---------- */
.row-land { grid-auto-columns: 66%; }
/* 横版内容卡（FANZA Premium + Netflix 风，UI Phase 22 统一）：封面 + 底部渐变 + 左上 badge + 信息区 */
.lcard {
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 16px; background: var(--bg-elev);
    border: 1px solid var(--glass-border); color: inherit; text-decoration: none;
    transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.lcard:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.6), var(--glow); border-color: var(--glow-border); }
.lcard-thumb { position: relative; aspect-ratio: 2 / 3; overflow: hidden; flex: 0 0 auto; } /* UI Phase 60：统一竖版海报 2:3（原 16/9 横版） */
.lcard-media { position: absolute; inset: 0; background: #1c1c28 center/cover no-repeat; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.lcard:hover .lcard-media { transform: scale(1.05); }
.lcard-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(5,5,9,.78) 0%, rgba(5,5,9,.12) 38%, transparent 62%); }
.lcard-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-dim); font-size: 12px; }
.lcard-info { flex: 1 1 auto; padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; }
.lcard-title { font-size: 13px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lcard-actress { font-size: 12px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 左上角 badge（分类 + 画质，FANZA 风，替代旧灰色标签） */
.cbadges { position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; gap: 4px; }
.cbadge { font-size: 10px; font-weight: 800; letter-spacing: .4px; line-height: 1; padding: 4px 7px; border-radius: 7px; color: #fff; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.cbadge-type { background: linear-gradient(135deg, var(--accent), #ff5c9a); }
.cbadge-q { background: linear-gradient(135deg, var(--accent-2), #ffc24d); color: #2a1a02; }

/* ---------- Sections / rows (Netflix carousel) ---------- */
.section-sub { color: var(--text-dim); font-size: 12px; margin-top: 2px; }

/* ---------- Banner ---------- */
.banner-row { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 16px 0; }
.banner { position: relative; display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
.banner img { width: 100%; height: auto; aspect-ratio: 16/5; object-fit: cover; }
.banner-cap { position: absolute; left: 14px; bottom: 12px; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
@media (min-width: 640px) { .banner-row { grid-template-columns: repeat(2, 1fr); } .banner-full { grid-column: 1 / -1; } }

/* ---------- 排行榜 ---------- */
/* Phase 16：Netflix Top-10 风 —— 巨型描边数字 */
.rank-list { display: grid; gap: 16px; margin: 18px 0; }
.rank-row { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; }
.rank-no {
    font-weight: 900; font-size: 48px; line-height: 1; text-align: center;
    font-variant-numeric: tabular-nums; letter-spacing: -2px;
    color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.25);
}
.rank-no.rank-top {
    -webkit-text-stroke: 0;
    background: linear-gradient(160deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 16px rgba(255,46,126,.45));
}
.rank-card { min-width: 0; }
.rank-metric { text-align: right; min-width: 58px; }
.rank-metric strong { display: block; font-size: 17px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.rank-metric .muted { font-size: 10.5px; }
@media (min-width: 1024px) {
    .rank-row { grid-template-columns: 88px 1fr auto; gap: 16px; }
    .rank-no { font-size: 80px; letter-spacing: -4px; }
}

/* ---------- 移动端粘性 CTA（第九阶段，仅 < 640px） ---------- */
.sticky-cta { display: none; }
@media (max-width: 639px) {
    .sticky-cta {
        position: fixed; left: 0; right: 0; bottom: var(--botnav-h); z-index: 99;
        display: flex; gap: 8px; padding: 10px 12px;
        background: var(--glass-strong);
        backdrop-filter: saturate(160%) blur(14px);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        border-top: 1px solid var(--glow-border);
    }
    .btn-cta-lg { flex: 1 1 auto; min-height: 48px; font-size: 15px; }
    .btn-cta-sm { flex: 0 0 auto; min-height: 48px; min-width: 48px; padding: 0 14px; font-size: 14px; }
    .detail { padding-bottom: 96px; } /* 给固定 CTA 留位 */
    /* 第九阶段：移动端 Lighthouse 触控目标 ≥ 48px / 可读字号 ≥ 12px */
    .chip, .btn, .pagination a, .pagination span, .lang-switch a, .seg a { min-height: 44px; display: inline-flex; align-items: center; }
    .card-title { font-size: 14px; }
    .card-sub { font-size: 12px; }
    /* 移动端内容卡：封面为主体，标题/女优紧凑两行（参考 Netflix / FANZA / DMM TV） */
    .lcard-title { font-size: 13px; }
    .lcard-actress { font-size: 12px; }
    .hero-dot { width: 12px; height: 12px; }
    .hero-dot.is-active { width: 28px; }
}

/* ---------- 搜索 ---------- */
.search-box { display: flex; align-items: center; gap: 6px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; padding: 4px 6px 4px 12px; }
.search-box input { background: transparent; border: none; color: var(--text); font-size: 13px; outline: none; width: 130px; }
.search-box input::placeholder { color: var(--text-dim); }
.search-box button { background: var(--accent); color: #fff; border: none; border-radius: 999px; width: 28px; height: 28px; cursor: pointer; }
.search-section { margin: 22px 0; }
.search-section h2 { font-size: 16px; margin: 0 0 10px; }
.section { margin: 20px 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.section-head h2 { font-size: 19px; font-weight: 800; letter-spacing: .2px; margin: 0; position: relative; padding-left: 13px; }
.section-head h2::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 17px; border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.section-head a { font-size: 13px; color: var(--text-dim); white-space: nowrap; transition: color .15s ease; }
.section-head a:hover { color: var(--accent); }

.row { display: grid; grid-auto-flow: column; grid-auto-columns: 34%; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.row > * { scroll-snap-align: start; }
.row::-webkit-scrollbar { height: 6px; }
.row::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 999px; }

/* ---------- Card (poster) ---------- */
/* 竖版作品卡（FANZA Premium + Netflix 风，UI Phase 22）：封面 + 底部渐变 + 左上 badge + 标题2行 + 女优一行 */
.card { display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--glass-border); border-radius: 18px; overflow: hidden; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow), var(--glow); border-color: var(--glow-border); }
.card-thumb { position: relative; aspect-ratio: 2 / 3; overflow: hidden; } /* UI Phase 60：统一竖版海报 2:3（原 3/4） */
.card-media { position: absolute; inset: 0; background: #1c1c28 center/cover no-repeat; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.card:hover .card-media { transform: scale(1.05); }
.card-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(5,5,9,.72) 0%, rgba(5,5,9,.1) 36%, transparent 60%); }
.card-thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-dim); font-size: 12px; }
/* UI Phase 50：移动端 2 列大卡——加大留白、标题 2 行清晰、女优 1 行 */
.card-body { padding: 11px 12px 13px; }
.card-title { font-size: 14px; font-weight: 700; line-height: 1.32; min-height: 2.64em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-actress { font-size: 12px; color: var(--accent); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Grid (list pages) ----------
   UI Phase 50：移动端高级感——默认 2 列大卡（不再一排 3 个小卡）；逐级增列。 */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 540px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 12px; padding: 6px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-dim); }
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip-count { margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 10px; background: rgba(255,255,255,.08); color: var(--text-dim); }

/* UX-01: 首页 Category 模块已移除；R-2 新增的 .home-cats 色块宫格 CSS 随之清理（除原 categories 模块外无其他引用）。 */

/* ---------- Toolbar (sort/filter) ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; }
.toolbar .seg { display: flex; gap: 4px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; padding: 4px; }
.toolbar .seg a { font-size: 13px; padding: 6px 12px; border-radius: 999px; color: var(--text-dim); }
.toolbar .seg a.is-active { background: var(--accent); color: #fff; }

/* ---------- Detail（Phase 21：FANZA 商品页风） ---------- */
.detail { position: relative; }
.detail-backdrop { position: absolute; inset: 0 0 auto; height: 380px; background-size: cover; background-position: center; opacity: .35; filter: saturate(120%); z-index: 0; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.detail-inner { position: relative; z-index: 1; display: grid; gap: 20px; padding-top: 18px; }

/* 封面区 */
.detail-gallery { display: flex; flex-direction: column; gap: 12px; max-width: 340px; }
.detail-poster {
    position: relative; display: block; width: 100%; aspect-ratio: 3/4;
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    background: #1c1c28 center/cover no-repeat; border: 1px solid var(--glass-border);
    transition: transform .2s ease, box-shadow .2s ease;
}
a.detail-poster:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,.6); }
.detail-poster .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-dim); font-size: 13px; }
.poster-badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.poster-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 60px; height: 60px; display: grid; place-items: center; z-index: 2;
    font-size: 20px; color: #fff; border-radius: 50%;
    background: rgba(255,46,126,.92); box-shadow: 0 10px 28px rgba(255,46,126,.5);
    opacity: .92; transition: opacity .2s ease, transform .2s ease;
}
a.detail-poster:hover .poster-play { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
.detail-thumbs { display: flex; flex-direction: column; gap: 6px; }
.thumbs-label { font-size: 12px; color: var(--text-dim); }
.detail-thumb { display: block; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; background: #1c1c28 center/cover no-repeat; border: 1px solid var(--glass-border); transition: transform .2s ease; }
a.detail-thumb:hover { transform: scale(1.02); }

/* 信息区 */
.detail-main { min-width: 0; }
.detail h1 { font-size: 22px; line-height: 1.25; margin: 8px 0 8px; }
.detail-actress { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 4px; font-weight: 700; }
.detail-actress a { color: var(--accent); }
.detail-actress a:hover { text-decoration: underline; }

/* 购买卡（高转化） */
.buy-card { margin: 14px 0; border-color: rgba(255,46,126,.35); box-shadow: 0 10px 30px rgba(255,46,126,.12); }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.cta-row .cta-work { flex: 1 1 auto; text-align: center; }
.buy-hint { margin-top: 10px; font-size: 12px; color: var(--text-dim); }

/* 规格表 */
.spec { display: grid; gap: 0; font-size: 14px; padding: 4px 16px; margin: 14px 0; }
.spec > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--glass-border); }
.spec > div:last-child { border-bottom: 0; }
.spec dt { color: var(--text-dim); margin: 0; }
.spec dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.detail-desc { margin: 14px 0; line-height: 1.7; color: var(--text); }

.glass-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 16px; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 30px rgba(0,0,0,.45); }

/* ---------- Actress ---------- */
/* Phase 16：女优区（DMM TV 风）—— 横向滑轨 + 环形头像（字母组合回退） */
/* 人気女優：横向滑动头像卡（FANZA / DMM TV 风），移动端不竖排、不占满屏宽 */
.actress-rail {
    display: flex; flex-wrap: nowrap;
    gap: 16px; overflow-x: auto; overflow-y: hidden;
    padding-bottom: 8px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.actress-rail::-webkit-scrollbar { height: 6px; }
.actress-rail::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 999px; }
.actress-chip {
    flex: 0 0 auto; width: 96px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center; scroll-snap-align: start;
}
.actress-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px var(--gap); }
.actress-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }

/* 圆形头像 */
.av {
    position: relative; display: grid; place-items: center; flex: 0 0 auto;
    border-radius: 9999px; overflow: hidden; background: #1c1c28;
    box-shadow: 0 0 0 2px rgba(255,255,255,.10), 0 6px 16px rgba(0,0,0,.4);
    transition: box-shadow .2s ease, transform .2s ease;
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.av-sm { width: 88px; height: 88px; }
.av-lg { width: 116px; height: 116px; }
/* 无头像统一圆形默认头像（深色剪影），不用彩色文字方块 */
.av-mono { color: #fff; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.av-sm.av-mono { font-size: 34px; }
.av-lg.av-mono { font-size: 46px; }
.actress-chip:hover .av, .actress-card:hover .av { box-shadow: 0 0 0 2px var(--accent), 0 8px 22px rgba(255,46,126,.35); transform: translateY(-2px); }
.actress-name { font-size: 12px; font-weight: 700; max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actress-count { font-size: 11px; color: var(--text-dim); }

/* Phase 21：女优详情头部 */
.actress-hero { margin: 18px 0; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.actress-hero-body { flex: 1; min-width: 220px; }
.actress-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 14px; }
.actress-stats strong { color: var(--accent); font-size: 18px; font-variant-numeric: tabular-nums; }
.toolbar h2 { margin-right: auto; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 26px 0; }
.pagination a, .pagination span { padding: 8px 13px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-border); font-size: 14px; color: var(--text-dim); }
.pagination .is-active { background: var(--accent); color: #fff; border: none; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 48px; border-top: 1px solid var(--glass-border); background: rgba(0,0,0,.3); }
.site-footer .inner { padding: 28px 0; color: var(--text-dim); font-size: 13px; display: grid; gap: 14px; }
.site-footer .social { display: flex; gap: 14px; flex-wrap: wrap; }
.site-footer .social a:hover { color: var(--accent); }

.page-title { font-size: 22px; margin: 18px 0 4px; }
.muted { color: var(--text-dim); }

/* ---------- Responsive (tablet / desktop) ---------- */
@media (min-width: 640px) {
    .grid { grid-template-columns: repeat(4, 1fr); }
    .actress-grid { grid-template-columns: repeat(5, 1fr); }
    .row { grid-auto-columns: 21%; }
    .row-land { grid-auto-columns: 36%; }
    .hero { min-height: 250px; }
    .hero-content h1 { font-size: 32px; }
    .hero-inner { min-height: 260px; padding: 24px 28px; }
    .hero-text h1 { font-size: 34px; }
    .hero-cover { display: block; width: 150px; }
    .hero-nav { display: block; }
    .detail-inner { grid-template-columns: 300px 1fr; }
    .detail h1 { font-size: 26px; }
}
@media (min-width: 1024px) {
    .grid { grid-template-columns: repeat(5, 1fr); }
    .actress-grid { grid-template-columns: repeat(8, 1fr); }
    .row { grid-auto-columns: 12.6%; }
    .row-land { grid-auto-columns: 23%; }
    .hero { min-height: 290px; }
    .hero-inner { min-height: 300px; }
    .hero-text h1 { font-size: 40px; }
    .hero-cover { width: 180px; }
    .detail-inner { grid-template-columns: 340px 1fr; }
    /* 桌面：封面区随滚动吸顶，CTA 常驻视野（提升转化） */
    .detail-gallery { position: sticky; top: 72px; align-self: start; }
}

/* 封面放大由 .lcard:hover .lcard-media / .card:hover .card-media 的 transform 处理（UI Phase 22） */

/* Phase 10: Hot Tags / Hot Actresses landing */
.hot-grid {
    display: grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 0 30px;
}
@media (min-width: 640px) { .hot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hot-grid { grid-template-columns: repeat(3, 1fr); } }
.hot-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; min-height: 44px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; color: inherit; text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.hot-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,200,0,0.3); }
.hot-rank {
    flex: 0 0 26px; height: 26px; min-width: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-weight: 700; font-size: 12px;
    background: linear-gradient(135deg, rgba(245,158,11,0.25), rgba(245,158,11,0.06));
    color: #fcd34d;
}
.hot-item:nth-child(-n+3) .hot-rank {
    background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff;
}
.hot-name { flex: 1; font-weight: 600; }
.hot-meta { display: inline-flex; gap: 10px; align-items: center; font-size: 12px; }
.hot-clicks { color: #34d399; font-weight: 600; }

/* Phase 10: related keywords (search) */
.related-kw { margin: 18px 0; }
.related-kw .chips { gap: 6px; }

/* Phase 11: CTA variants + placements */
.btn-warm { background: linear-gradient(135deg, #fb923c, #ef4444); color: #fff; border: none; box-shadow: 0 8px 24px rgba(251,146,60,.35); }
.btn-warm:hover { filter: brightness(1.08); }
.btn-gradient { background: linear-gradient(135deg, #06b6d4, #6366f1); color: #fff; border: none; box-shadow: 0 8px 24px rgba(99,102,241,.35); }
.btn-gradient:hover { filter: brightness(1.08); }
.btn-emerald { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; box-shadow: 0 8px 24px rgba(16,185,129,.35); }
.btn-emerald:hover { filter: brightness(1.08); }

.cta-hero { padding: 12px 22px; font-size: 16px; font-weight: 700; }
.cta-collection { padding: 12px 24px; font-size: 16px; font-weight: 700; margin: 14px 0 4px; display: inline-flex; align-items: center; gap: 8px; }
.cta-sticky { font-size: 14px; }
.cta-work { font-size: 15px; font-weight: 700; padding: 12px 22px; }

.cta-pulse {
    animation: cta-pulse 1.8s ease-in-out infinite;
}
@keyframes cta-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

/* Collection page Hero CTA bar */
.collection-cta-bar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-top: 10px;
}
.collection-cta-bar .muted { font-size: 12px; }

/* ---------- Phase B2: 多渠道 CTA 按钮组 ---------- */
.multi-cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.multi-cta-stack { flex-direction: column; }
.multi-cta-stack .btn-channel { width: 100%; }
.btn-channel {
    padding: 9px 14px; font-size: 13px; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    filter: saturate(.95);
}
.btn-channel:hover { filter: brightness(1.1) saturate(1); }

/* ============================================================
   东京夜生活风（Nightlife）—— 底部导航 + 区域卡片 + Hero 发现条
   ============================================================ */

/* ---------- 移动端底部固定导航 ---------- */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    display: flex; justify-content: space-around; align-items: stretch;
    height: calc(var(--botnav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--glass-strong);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-top: 1px solid var(--glass-border);
}
.bn-item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--text-dim); font-size: 10.5px; font-weight: 600; min-width: 0;
    transition: color .15s ease;
}
.bn-icon { width: 23px; height: 23px; }
.bn-label { line-height: 1; white-space: nowrap; }
.bn-item.is-active { color: var(--accent); }
.bn-item.is-active .bn-icon { filter: drop-shadow(0 0 8px rgba(255,43,122,.55)); }
.bn-item:active { transform: scale(.94); }
/* 给底部导航留位（移动端） */
body { padding-bottom: calc(var(--botnav-h) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
    .bottom-nav { display: none; }
    body { padding-bottom: 0; }
}

/* ---------- 东京区域风卡片（专题/分类） ---------- */
.district-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.district-card {
    position: relative; display: block; aspect-ratio: 4/3; overflow: hidden;
    border-radius: 16px; border: 1px solid var(--glass-border);
    background: var(--bg-elev) center/cover no-repeat; box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.district-card:hover { transform: translateY(-4px); box-shadow: var(--shadow), var(--glow); border-color: var(--glow-border); }
.district-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(5,5,9,.92) 6%, rgba(5,5,9,.35) 48%, rgba(5,5,9,.15) 100%);
}
.dc-rank {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    min-width: 26px; height: 26px; padding: 0 7px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 6px 16px rgba(255,43,122,.45);
}
.dc-status {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    font-size: 10.5px; font-weight: 700; letter-spacing: .3px; padding: 3px 9px; border-radius: 999px;
    color: #fff; background: rgba(8,9,16,.6); border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dc-status.is-hot { background: rgba(255,43,122,.85); border-color: transparent; }
.dc-body { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2; }
.dc-title { font-size: 15px; font-weight: 800; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,.7); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.dc-sub { margin-top: 3px; font-size: 11.5px; color: rgba(255,255,255,.72); }
.dc-sub .accent { color: var(--accent); font-weight: 700; }
@media (min-width: 640px) { .district-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .district-grid { grid-template-columns: repeat(4, 1fr); } .district-card { aspect-ratio: 5/4; } }

/* ---------- Hero 发现条（搜索 + 分类 + 热门标签） ---------- */
.hero-discovery {
    margin: -6px 0 16px; padding: 16px; border-radius: var(--radius);
    background: var(--glass); border: 1px solid var(--glass-border);
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: var(--shadow);
}
.hd-search { display: flex; align-items: center; gap: 8px; background: rgba(8,9,16,.7); border: 1px solid var(--glow-border); border-radius: 999px; padding: 6px 8px 6px 16px; }
.hd-search input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--text); font-size: 15px; outline: none; }
.hd-search input::placeholder { color: var(--text-dim); }
.hd-search button { flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 999px; cursor: pointer; color: #fff; font-size: 17px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--glow); }
.hd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.hd-cap { font-size: 11px; font-weight: 700; color: var(--text-dim); letter-spacing: .4px; text-transform: uppercase; margin-right: 2px; }
.hd-chip { font-size: 12.5px; padding: 6px 13px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--glow-border); color: #fff; }
.hd-chip:hover { background: var(--accent); }
.hd-chip.cat { background: rgba(255,159,28,.14); border-color: rgba(255,159,28,.4); }
.hd-chip.cat:hover { background: var(--accent-2); color: #1a1206; }

/* ============================================================
   Phase 22 运营模块：TOP 10 / HOT TAGS / TOP ACTRESSES
   ============================================================ */

/* TOP 10 排行（横向大数字卡） */
.top10-rail { display: flex; gap: 16px; overflow-x: auto; padding: 4px 0 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.top10-rail::-webkit-scrollbar { height: 6px; }
.top10-rail::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 999px; }
.top10-card { flex: 0 0 auto; width: 142px; display: flex; flex-direction: column; gap: 8px; color: inherit; scroll-snap-align: start; }
.t10-media { position: relative; }
.t10-poster { display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 16px; background: #1c1c28 center/cover no-repeat; border: 1px solid var(--glass-border); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } /* UI Phase 60：统一竖版海报 2:3（原 3/4） */
.top10-card:hover .t10-poster { transform: translateY(-4px); box-shadow: var(--shadow), var(--glow); border-color: var(--glow-border); }
.t10-rank {
    position: absolute; left: -8px; bottom: -10px; z-index: 2;
    font-size: 58px; font-weight: 900; line-height: .8; letter-spacing: -3px;
    font-variant-numeric: tabular-nums; color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,.35);
    text-shadow: 0 4px 14px rgba(0,0,0,.6);
}
.t10-rank.is-top {
    -webkit-text-stroke: 0;
    background: linear-gradient(160deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 14px rgba(255,43,122,.55));
}
.t10-info { display: flex; flex-direction: column; gap: 2px; padding-left: 2px; }
.t10-title { font-size: 12.5px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t10-sub { font-size: 11px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* HOT TAGS（排行 chip 网格） */
.hot-tag-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hot-tag {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 10px 12px; border-radius: 14px;
    background: var(--glass); border: 1px solid var(--glass-border); color: inherit;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.hot-tag:hover { border-color: var(--glow-border); background: var(--accent-soft); transform: translateY(-2px); }
.ht-rank { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text-dim); background: rgba(255,255,255,.05); }
.ht-rank.is-top { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 12px rgba(255,43,122,.4); }
.ht-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-count { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .hot-tag-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .hot-tag-grid { grid-template-columns: repeat(4, 1fr); } }

/* TOP ACTRESSES（带排名 badge 的肖像） */
.ta-wrap { position: relative; display: inline-grid; }
.ta-rank {
    position: absolute; top: -4px; left: -4px; z-index: 2;
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums;
    color: #fff; background: rgba(8,9,16,.78); border: 1px solid rgba(255,255,255,.18);
}
.ta-rank.is-top { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 4px 12px rgba(255,43,122,.45); }

/* ============================================================
   隐藏横向滚动条（保留横滑能力 / 不影响纵向滚动）—— 问题 3
   Chrome / Safari (::-webkit-scrollbar) + Firefox (scrollbar-width) + IE/Edge (-ms)
   覆盖：顶部导航 / 作品行 / 标签行 / 专题行 / 女优行 / 排行行 / Hero chips
   ============================================================ */
.scrollbar-hide,
.nav-strip,      /* App 风顶部分类导航 */
.row,            /* work / tag / collection / category 内容行（.row.row-land） */
.actress-rail,   /* 女优行 / TOP ACTRESSES */
.top10-rail,     /* TOP 10 排行行 */
.hd-row,         /* Hero 发现条 chips */
.chips {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar,
.nav-strip::-webkit-scrollbar,
.row::-webkit-scrollbar,
.actress-rail::-webkit-scrollbar,
.top10-rail::-webkit-scrollbar,
.hd-row::-webkit-scrollbar,
.chips::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* UI Phase 22：作品网格 PC 自适应 4–6 列（移动 3 / 640 4 / 1024 5 / 1280 6） */
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(6, 1fr); } }

/* ============================================================
   UI Phase 23：影院级 Hero（Netflix / FANZA TV / fuzoku.cc 风）
   全屏背景 + 顶/底/左渐变 + 徽章 + 统计 + 搜索 + 热门标签 + 玻璃圆点
   ============================================================ */
.hero-cine {
    position: relative; overflow: hidden;
    min-height: 315px;                 /* Homepage RC2：Hero 高度压缩 25%（420→315） */
    margin: 0 -16px 14px; border-radius: 0;
    background: var(--bg-elev);
    box-shadow: var(--shadow);
}
.hero-cine .hero-track { position: absolute; inset: 0; }   /* 让 slide 的 inset:0 对齐整个 Hero（否则 track 高度为 0，bg 塌成 0 高度） */
.hero-cine .hero-slide { position: absolute; inset: 0; display: block; }
.hero-cine .hero-slide::after { content: none; }  /* 用 .hero-shade 代替旧 ::after */
.hero-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    transform: scale(1.05);
}
.hero-shade {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(0deg,  rgba(5,5,9,.94) 2%, rgba(5,5,9,.35) 42%, transparent 72%),  /* bottom */
        linear-gradient(90deg, rgba(5,5,9,.88) 0%, rgba(5,5,9,.25) 46%, transparent 78%),  /* left */
        linear-gradient(180deg, rgba(5,5,9,.7) 0%, transparent 30%);                       /* top */
}
.hero-content {
    position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto;
    min-height: 315px; display: flex; flex-direction: column; justify-content: flex-end;  /* RC2 -25% */
    padding: 0 18px 24px; gap: 9px;
}
/* 徽章 HOT / PICK UP / TOP10 */
.hero-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.hbadge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #fff; padding: 5px 11px; border-radius: 999px; line-height: 1; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.hbadge.pickup { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px rgba(255,43,122,.45); }
.hbadge.hot { background: rgba(255,43,122,.9); }
.hbadge.top10 { background: linear-gradient(135deg, var(--accent-2), #ffc24d); color: #2a1a02; }
.hero-title { margin: 2px 0; font-size: 24px; font-weight: 900; line-height: 1.16; text-shadow: 0 2px 20px rgba(0,0,0,.7); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 760px; }
.hero-content .hero-actress { color: var(--accent); font-weight: 700; font-size: 14px; margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero-wtags { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-wtags .wtag { font-size: 11.5px; color: #fff; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(4px); }
.hero-content .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* 静态叠层：搜索 + 统计 + 热门标签（顶部融合） */
.hero-deck { position: absolute; top: 0; left: 0; right: 0; z-index: 3; max-width: var(--maxw); margin: 0 auto; padding: 14px 16px 0; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.hero-deck > * { pointer-events: auto; }
.hero-search { display: flex; align-items: center; gap: 8px; background: var(--glass-strong); border: 1px solid var(--glow-border); border-radius: 999px; padding: 6px 8px 6px 16px; backdrop-filter: blur(12px); max-width: 560px; }
.hero-search input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--text); font-size: 15px; outline: none; }
.hero-search input::placeholder { color: var(--text-dim); }
.hero-search button { flex: 0 0 auto; width: 38px; height: 38px; border: none; border-radius: 999px; cursor: pointer; color: #fff; font-size: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--glow); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.hstat { font-size: 12px; color: rgba(255,255,255,.85); padding: 5px 11px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(8px); }
.hstat b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 3px; }
.hero-hottags { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-hottags .htag { font-size: 12px; color: #fff; padding: 5px 11px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--glow-border); }
.hero-hottags .htag:hover { background: var(--accent); }

/* 玻璃风轮播圆点 */
.hero-cine .hero-dots { position: absolute; z-index: 4; bottom: 14px; right: 16px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); }
.hero-cine .hero-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.45); transition: width .25s ease, background .25s ease; }
.hero-cine .hero-dot.is-active { width: 22px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.hero-cine .hero-nav { display: none; }

@media (min-width: 768px) {
    .hero-cine { min-height: 450px; margin: 0 0 20px; border-radius: var(--radius); }  /* RC2 -25% (600→450) */
    .hero-cine .hero-content { min-height: 450px; padding: 0 40px 40px; gap: 11px; }  /* RC2 -25% */
    .hero-title { font-size: 40px; }
    .hero-content .hero-actress { font-size: 16px; }
    .hero-deck { padding: 22px 40px 0; }
    .hero-cine .hero-nav { display: grid; place-items: center; }
}
@media (min-width: 1024px) {
    .hero-cine { min-height: 510px; }     /* UX-01 M-4：660→510，降低 Hero 高度，让内容更早露出 */
    .hero-cine .hero-content { min-height: 510px; }
    .hero-title { font-size: 46px; }
}

/* ============================================================
   Hero 移动端修复（Mobile Hero Fix · ≤767px）— 仅作用于手机端，桌面端(≥768px)不受影响。
   解决：文字重叠 / 标题过大 / 搜索框·统计·标签·按钮挤压 / 视觉层级混乱。
   ============================================================ */
@media (max-width: 767px) {
    /* 1) 固定最小高度 540px（区间 520–580），给顶部搜索区与底部内容区足够留白，杜绝重叠 */
    .hero-cine { min-height: 540px; }
    .hero-cine .hero-content {
        min-height: 540px;
        padding: 0 16px 52px;        /* 底部多留 52px 给圆点，避免压住 CTA */
        gap: 12px;                   /* 5) 层与层之间统一 12px 间距（10–14px 区间） */
        justify-content: flex-end;
    }

    /* 9) 更强暗色渐变遮罩：顶部 60% / 底部 90% */
    .hero-shade {
        background:
            linear-gradient(180deg, rgba(5,5,9,.60) 0%, rgba(5,5,9,.18) 28%, transparent 44%),   /* top 60% */
            linear-gradient(0deg,   rgba(5,5,9,.90) 0%, rgba(5,5,9,.55) 30%, rgba(5,5,9,.15) 60%, transparent 82%); /* bottom 90% */
    }

    /* 2) 搜索框独立置于 Hero 顶部，单独成行、整宽，不与标题重叠 */
    .hero-deck { padding: 12px 16px 0; gap: 10px; }
    .hero-search { max-width: none; width: 100%; }

    /* 3) 统计胶囊只保留一行：宽度不足时横向滚动，绝不换行压住标题 */
    .hero-stats {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        gap: 8px; scrollbar-width: none; padding-bottom: 2px;
    }
    .hero-stats::-webkit-scrollbar { display: none; }
    .hstat { flex: 0 0 auto; white-space: nowrap; }

    /* 顶部热门标签同样单行横向滚动，避免多行下压标题 */
    .hero-hottags {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        gap: 6px; scrollbar-width: none;
    }
    .hero-hottags::-webkit-scrollbar { display: none; }
    .hero-hottags .htag { flex: 0 0 auto; white-space: nowrap; }

    /* 4) 标题最多 2 行，字号降到 26px（24–28px 区间） */
    .hero-title { font-size: 26px; line-height: 1.2; margin: 0; -webkit-line-clamp: 2; }

    /* 5) 女优/厂商、徽章、标签、按钮分层；层间距由 .hero-content gap 统一控制 */
    .hero-content .hero-actress { font-size: 13.5px; margin: 0; }
    .hero-badges { gap: 6px; margin: 0; }

    /* 6) 内容标签最多 4 个，多余隐藏（兜底；Blade 已 take(4)） */
    .hero-wtags { flex-wrap: wrap; gap: 6px; }
    .hero-wtags .wtag:nth-child(n+5) { display: none; }

    /* 7) CTA 固定在 Hero 底部，两个按钮同排均分宽度 */
    .hero-content .hero-cta { flex-wrap: nowrap; gap: 10px; margin-top: 2px; width: 100%; }
    .hero-content .hero-cta > a,
    .hero-content .hero-cta > .btn {
        flex: 1 1 0; min-width: 0; text-align: center; justify-content: center; white-space: nowrap;
    }

    /* 8) 分页圆点移到底部居中（按钮下方），不压住 CTA */
    .hero-cine .hero-dots { bottom: 12px; right: auto; left: 50%; transform: translateX(-50%); }
}

/* ============================================================
   UI Phase 24：作品详情页 FANZA Premium 商品页
   ============================================================ */
.wd-hero { position: relative; z-index: 1; display: grid; gap: 16px; padding-top: 16px; }
.wd-poster { position: relative; display: block; aspect-ratio: 3/2; border-radius: 16px; overflow: hidden; background: #1c1c28 center/cover no-repeat; border: 1px solid var(--glass-border); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
a.wd-poster:hover { transform: translateY(-3px); box-shadow: var(--shadow), var(--glow); }
.wd-poster .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-dim); }
.wd-poster-badges { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; }
.wd-poster .poster-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 58px; height: 58px; display: grid; place-items: center; font-size: 19px; color: #fff; border-radius: 50%; background: rgba(255,43,122,.92); box-shadow: 0 10px 28px rgba(255,43,122,.5); }

.wd-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.tbadge { font-size: 11.5px; font-weight: 800; letter-spacing: .2px; padding: 4px 10px; border-radius: 8px; color: #fff; line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.tbadge.tb-default { background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); box-shadow: none; }
.tbadge.tb-4k      { background: linear-gradient(135deg, #3da5ff, #1d6fd0); }
.tbadge.tb-vr      { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.tbadge.tb-excl    { background: linear-gradient(135deg, #ff9f1c, #e11d48); }
.tbadge.tb-ol      { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.tbadge.tb-silk    { background: linear-gradient(135deg, var(--accent), #c81e63); }
.tbadge.tb-bust    { background: linear-gradient(135deg, #ff8a3d, #e0532a); }
.tbadge.tb-uniform { background: linear-gradient(135deg, #6366f1, #4338ca); }
.tbadge.tb-mature  { background: linear-gradient(135deg, #e11d48, #9f1239); }

.wd-title { font-size: 21px; font-weight: 800; line-height: 1.24; margin: 4px 0 7px; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.wd-actress { display: flex; flex-wrap: wrap; gap: 6px 12px; font-weight: 700; margin-bottom: 10px; }
.wd-actress a { color: var(--accent); }
.wd-actress a:hover { text-decoration: underline; }

.wd-meta { display: grid; margin: 2px 0 14px; }
.wd-meta > div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--glass-border); font-size: 13.5px; }
.wd-meta .k { color: var(--text-dim); }
.wd-meta .v.link { color: var(--accent); }
.wd-rating { display: inline-flex; align-items: center; }
.wd-rating .star { color: rgba(255,255,255,.18); font-size: 15px; line-height: 1; }
.wd-rating .star.on { color: var(--accent-2); }
.wd-rating .star.half { background: linear-gradient(90deg, var(--accent-2) 50%, rgba(255,255,255,.18) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wd-rating b { margin-left: 7px; color: #fff; font-variant-numeric: tabular-nums; font-size: 13px; }

/* 女优信息模块 */
.wd-actresses { display: flex; flex-wrap: wrap; gap: 16px; }
.wd-actress-card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; text-align: center; color: inherit; }

/* 样品视频 */
.wd-video { position: relative; display: grid; place-items: center; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #1c1c28 center/cover no-repeat; border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
.wd-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,5,9,.72), rgba(5,5,9,.12) 55%, rgba(5,5,9,.3)); }
.wd-video-play { position: relative; z-index: 2; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; font-size: 26px; color: #fff; background: rgba(255,43,122,.92); box-shadow: 0 12px 34px rgba(255,43,122,.55); transition: transform .2s ease; }
.wd-video:hover .wd-video-play { transform: scale(1.08); }
.wd-video-cap { position: absolute; z-index: 2; bottom: 12px; left: 14px; font-size: 12px; color: rgba(255,255,255,.85); }
/* 本地样品视频播放器（有公开样品直链 .mp4/.m3u8 时使用） */
.wd-video-player { display: block; width: 100%; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--glass-border); box-shadow: var(--shadow); }

/* 样品图 + 灯箱 */
.wd-samples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sample-item { display: block; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; border: 1px solid var(--glass-border); cursor: zoom-in; background: #14141d; }
.sample-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sample-item:hover img { transform: scale(1.06); }
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: rgba(5,5,9,.95); backdrop-filter: blur(6px); }
.lightbox.on { display: grid; }
.lb-img { max-width: 94vw; max-height: 88vh; border-radius: 10px; box-shadow: var(--shadow); }
.lb-btn { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; color: #fff; font-size: 24px; background: var(--glass-strong); border: 1px solid var(--glass-border); backdrop-filter: blur(8px); }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

@media (min-width: 640px) { .wd-samples { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) {
    .wd-hero { grid-template-columns: minmax(300px, 380px) 1fr; align-items: start; gap: 26px; }
    .wd-poster-col { position: sticky; top: 116px; }   /* 两栏：封面随滚动吸顶 */
    .wd-title { font-size: 26px; }
}
@media (min-width: 1024px) { .wd-samples { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   UI Phase 25：女优详情页 Premium（FANZA / DMM Actress / Netflix Artist）
   ============================================================ */
.actress-page { position: relative; }
.actress-banner { position: relative; height: 170px; margin: 0 -16px; background: var(--bg-elev) center/cover no-repeat; }
.actress-banner .ab-shade { position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 4%, transparent 74%), linear-gradient(90deg, rgba(5,5,9,.5), transparent 62%); }
.actress-layout { display: grid; gap: 18px; margin-top: 16px; }
/* block 容器 + flex-ROW 头部（避开 flex-column 在 headless 吞子元素的问题，沿用 Phase21 可靠结构） */
.actress-profile { display: block; padding: 16px; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--glass-border); }
.ap-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ap-avatar { flex: 0 0 auto; }
.ap-avatar .av-lg { width: 92px; height: 92px; box-shadow: 0 0 0 3px var(--glow-border), 0 10px 26px rgba(0,0,0,.5); }
.ap-id { min-width: 0; }
.ap-name { font-size: 20px; font-weight: 800; margin: 0 0 7px; line-height: 1.25; }
.ap-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.ap-heat { font-size: 13px; color: var(--accent-2); font-weight: 800; }
.ap-heat span { color: var(--text-dim); font-weight: 600; font-size: 11px; }
.ap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.ap-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border); }
.ap-stats b { font-size: 18px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.ap-stats span { font-size: 10.5px; color: var(--text-dim); }
.ap-bio { font-size: 13px; color: var(--text-dim); margin: 0 0 10px; line-height: 1.6; }
.ap-tags { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) {
    .actress-banner { height: 260px; border-radius: 0 0 var(--radius) var(--radius); }
    .actress-layout { grid-template-columns: 300px 1fr; align-items: start; gap: 26px; }
    .actress-profile { position: sticky; top: 116px; }
    .ap-stats { grid-template-columns: repeat(2, 1fr); }
    .ap-avatar .av-lg { width: 104px; height: 104px; }
}

/* ============================================================
   UI Phase 26：Ranking + Trending Premium（Netflix Top10 / FANZA 排行）
   ============================================================ */
.rank-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0; }
.rank-head .page-title { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rank-seg { display: inline-flex; gap: 4px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; padding: 4px; }
.rank-seg a { font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; color: var(--text-dim); }
.rank-seg a.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: var(--glow); }

/* ============================================================
   Phase 54 — Ranking Premium 中心（JavDB / FANZA / Netflix Top10）
   榜单×周期 tab + TOP3 大数字英雄卡 + 4–10 列表 + 升降徽章
   ============================================================ */
.rkc-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin: 0 0 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rkc-tabs::-webkit-scrollbar { display: none; }
.rkc-periods { margin-bottom: 18px; }
.rkc-tab { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--text-dim); background: var(--glass); border: 1px solid var(--glass-border); white-space: nowrap; }
.rkc-tab:hover { color: var(--text); border-color: var(--accent); }
.rkc-boards .rkc-tab.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; box-shadow: var(--glow); }
.rkc-periods .rkc-tab.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--glow-border); }

.rkc-top3 { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
.rkc-hero { position: relative; display: block; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; background: var(--bg-elev); border: 1px solid var(--glass-border); box-shadow: var(--shadow); color: inherit; isolation: isolate; }
.rkc-hero.is-av { aspect-ratio: 16/10; }
.rkc-hero.is-text { aspect-ratio: 21/9; background: linear-gradient(135deg, rgba(255,43,122,.18), rgba(255,159,28,.12)); }
.rkc-hero-media { position: absolute; inset: 0; background-size: cover; background-position: right center; transition: transform .4s ease; }
.rkc-hero.is-av .rkc-hero-media { background-position: center 22%; }
.rkc-hero:hover .rkc-hero-media { transform: scale(1.05); }
.rkc-hero-grad { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(5,5,9,.93) 4%, rgba(5,5,9,.2) 52%, transparent 80%), linear-gradient(90deg, rgba(5,5,9,.55), transparent 60%); }
.rkc-hero-num { position: absolute; left: 8px; bottom: -8px; z-index: 2; font-size: 92px; font-weight: 900; line-height: .8; letter-spacing: -5px; font-variant-numeric: tabular-nums; background: linear-gradient(160deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 16px rgba(255,43,122,.5)); }
.rkc-h1 .rkc-hero-num { background: linear-gradient(160deg, var(--accent-2), #ffd24a); -webkit-background-clip: text; background-clip: text; }
.rkc-hero-badges { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; gap: 6px; }
.rkc-hero-info { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 3; display: flex; flex-direction: column; gap: 3px; padding-left: 74px; }
.rkc-hero-title { font-size: 15px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.rkc-hero-sub { font-size: 12px; color: var(--accent); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rkc-hero-score { font-size: 12px; color: rgba(255,255,255,.82); }
.rkc-hero-score b { color: var(--accent-2); font-weight: 800; margin-right: 3px; font-variant-numeric: tabular-nums; }

.rkc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rkc-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border); }
.rkc-row:hover { border-color: var(--accent); }
.rkc-row-num { flex: 0 0 auto; width: 26px; text-align: center; font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.rkc-row-num.top { color: var(--accent); }
.rkc-row-media { flex: 0 0 auto; width: 64px; height: 40px; border-radius: 8px; background: #1c1c28 center/cover no-repeat; }
.rkc-row-media.is-av { width: 44px; height: 44px; border-radius: 50%; background-position: center 22%; }
.rkc-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; }
.rkc-row-title { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rkc-row-sub { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rkc-row-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.rkc-row-score { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.rkc-row-score b { font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.rkc-row-score span { font-size: 10px; color: var(--text-dim); }

.rkc-d { flex: 0 0 auto; display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; line-height: 1.4; letter-spacing: .3px; }
.rkc-d.up { color: #2ee59d; background: rgba(46,229,157,.16); }
.rkc-d.down { color: #ff5c7a; background: rgba(255,92,122,.16); }
.rkc-d.new { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

@media (min-width: 768px) {
    .rkc-top3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .rkc-hero, .rkc-hero.is-av, .rkc-hero.is-text { aspect-ratio: 4/5; }
    .rkc-hero-num { font-size: 110px; }
    .rkc-hero-info { padding-left: 88px; }
    .rkc-list { grid-template-columns: 1fr 1fr; gap: 10px; }
}

.rank-layout { display: grid; gap: 22px; }
.rank-main { min-width: 0; }

/* Top 3 英雄卡（Netflix 大数字） */
.rank-top3 { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
.rt3 { position: relative; display: block; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #14141d center/cover no-repeat; border: 1px solid var(--glass-border); box-shadow: var(--shadow); color: inherit; }
.rt3-media { position: absolute; inset: 0; background: inherit; background-size: cover; background-position: right center; transition: transform .3s ease; }
.rt3:hover .rt3-media { transform: scale(1.05); }
.rt3-grad { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,5,9,.92) 6%, rgba(5,5,9,.25) 50%, transparent 80%), linear-gradient(90deg, rgba(5,5,9,.7), transparent 55%); }
.rt3-num { position: absolute; z-index: 2; left: 8px; bottom: -6px; font-size: 96px; font-weight: 900; line-height: .8; letter-spacing: -6px; font-variant-numeric: tabular-nums; background: linear-gradient(160deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 16px rgba(255,43,122,.5)); }
.rt3-badges { position: absolute; z-index: 3; top: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rt3-info { position: absolute; z-index: 2; left: 92px; right: 14px; bottom: 12px; }
.rt3-title { display: block; font-size: 14px; font-weight: 800; line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,.7); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rt3-metric { font-size: 12px; color: rgba(255,255,255,.8); }
.rt3-metric b { color: var(--accent); }

/* 4 位后榜行 */
.rank-rest { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rrow { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; }
.rrow-no { font-size: 22px; font-weight: 900; color: var(--text-dim); text-align: center; font-variant-numeric: tabular-nums; }
.rrow-card { min-width: 0; }
.rrow-meta { text-align: right; min-width: 56px; }
.rrow-metric { display: block; margin-top: 4px; }
.rrow-metric b { display: block; font-size: 15px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.rrow-metric span { font-size: 10px; color: var(--text-dim); }

/* 状态徽章 */
.rstatus { display: inline-block; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 6px; line-height: 1; }
.rstatus.up { background: rgba(34,197,94,.18); color: #22c55e; border: 1px solid rgba(34,197,94,.4); }
.rstatus.down { background: rgba(255,77,79,.16); color: #ff6b6e; border: 1px solid rgba(255,77,79,.4); }
.rstatus.new { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }

/* 侧栏四榜 */
.rank-side { display: grid; gap: 16px; align-content: start; }
.rboard { background: var(--bg-elev); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 12px 14px; }
.rboard-head h2 { font-size: 15px; font-weight: 800; margin: 0 0 8px; padding-left: 11px; position: relative; }
.rboard-head h2::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 15px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.rboard-list { list-style: none; margin: 0; padding: 0; }
.rboard-list li a { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--glass-border); color: inherit; }
.rboard-list li:last-child a { border-bottom: 0; }
.rb-no { flex: 0 0 auto; width: 20px; text-align: center; font-size: 13px; font-weight: 900; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.rb-no.top { color: var(--accent); }
.rb-av { flex: 0 0 auto; }
.rb-av .av-sm { width: 30px; height: 30px; }
.rb-label { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-count { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
    .rank-top3 { grid-template-columns: repeat(3, 1fr); }
    .rt3 { aspect-ratio: 3/4; }
    .rt3-num { font-size: 76px; }
    .rt3-info { left: 14px; right: 14px; }
}
@media (min-width: 1024px) {
    .rank-layout { grid-template-columns: 1fr 320px; align-items: start; }
}

/* ============================================================
   UI Phase 27 — Search Premium（Netflix / DMM / FANZA Search 参考）
   置顶搜索栏 + 实时建议 + 统一结果 + 热门/最近/相关推荐 + PC 双栏
   ============================================================ */
.srch { margin-top: 8px; }

/* ① 置顶搜索栏（sticky，吸在站点 header 之下） */
.srch-top { position: sticky; top: 118px; z-index: 30; padding: 12px 0 10px; margin: 0 0 6px; background: linear-gradient(180deg, var(--bg) 70%, transparent); }
.srch-form { display: flex; gap: 8px; align-items: stretch; }
.srch-field { position: relative; flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 999px; transition: border-color .15s ease, box-shadow .15s ease; }
.srch-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.srch-ico { width: 20px; height: 20px; flex: 0 0 auto; color: var(--text-dim); }
.srch-field input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: 16px; height: 46px; }
.srch-field input::placeholder { color: var(--text-dim); }
.srch-field input::-webkit-search-cancel-button { display: none; }
.srch-clear { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; border: none; cursor: pointer; background: var(--glass); color: var(--text-dim); font-size: 18px; line-height: 1; display: grid; place-items: center; }
.srch-clear:hover { color: var(--text); }
.srch-submit { flex: 0 0 auto; padding: 0 20px; border: none; border-radius: 999px; cursor: pointer; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--glow); }
.srch-submit:hover { filter: brightness(1.06); }

/* 实时建议下拉 */
.srch-suggest { position: absolute; left: 16px; right: 16px; max-width: var(--maxw); margin: 6px auto 0; max-height: 70vh; overflow-y: auto; padding: 8px; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); z-index: 60; }
.sg { padding: 4px 2px; }
.sg + .sg { border-top: 1px solid var(--glass-border); margin-top: 4px; padding-top: 8px; }
.sg-h { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-dim); margin: 0 6px 6px; }
.sg-i { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; color: var(--text); }
.sg-i:hover { background: var(--accent-soft); }
.sg-thumb { flex: 0 0 auto; width: 38px; height: 50px; border-radius: 7px; background: #1c1c28 center/cover no-repeat; }
.sg-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px; overflow: hidden; background: #1c1c28; }
.sg-av img { width: 100%; height: 100%; object-fit: cover; }
.sg-tx { min-width: 0; display: flex; flex-direction: column; }
.sg-t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-s { font-size: 11.5px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-chip { display: inline-flex; }
.sg-tag { color: var(--accent); }
.sg-series, .sg-maker { color: var(--text-dim); }

/* ② 双栏布局 */
.srch-layout { display: grid; grid-template-columns: 1fr; gap: 18px; }
.srch-h1 { font-size: 20px; font-weight: 800; margin: 0; word-break: break-word; }
.srch-hero { margin: 8px 0 16px; }
.srch-hero .muted { margin: 6px 0 0; font-size: 13px; }
.srch-summary { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.srch-count { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.srch-sec { margin: 18px 0; scroll-margin-top: 184px; }

/* 结果导航（计数 tab） */
.srch-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.srch-nav-i { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text-dim); background: var(--glass); border: 1px solid var(--glass-border); }
.srch-nav-i:hover { color: var(--text); border-color: var(--accent); }
.srch-nav-i b { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }

/* ③ 彩色标签徽章 */
.tbadges { display: flex; flex-wrap: wrap; gap: 8px; }
.tbadge { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; color: hsl(var(--h), 85%, 74%); background: hsla(var(--h), 70%, 55%, .14); border: 1px solid hsla(var(--h), 70%, 60%, .42); transition: transform .12s ease, box-shadow .12s ease; }
.tbadge:hover { transform: translateY(-1px); box-shadow: 0 4px 14px hsla(var(--h), 70%, 50%, .35); color: hsl(var(--h), 90%, 82%); }
.chip-series, .chip-maker { font-size: 13px; }
.chip-series:hover { border-color: var(--accent-2); color: var(--text); }

/* HOT / TRENDING / POPULAR 徽章 */
.sbadge { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .3px; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; line-height: 1.5; }
.sbadge-hot { color: #fff; background: linear-gradient(135deg, #ff2b7a, #ff5b4c); }
.sbadge-trending { color: #1a1205; background: linear-gradient(135deg, var(--accent-2), #ffd24a); }
.sbadge-popular { color: #cfe9ff; background: rgba(56, 132, 255, .22); border: 1px solid rgba(80, 150, 255, .4); }

/* 热门搜索网格（主栏） */
.hotsearch-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.hotsearch-i { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border); transition: border-color .15s ease, transform .12s ease; }
.hotsearch-i:hover { border-color: var(--accent); transform: translateY(-2px); }
.hotsearch-t { font-size: 13.5px; font-weight: 700; color: var(--text); }

/* 空结果优化 */
.srch-empty { text-align: center; padding: 40px 16px 24px; }
.srch-empty-ico { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 999px; color: var(--accent); background: var(--accent-soft); }
.srch-empty-ico svg { width: 30px; height: 30px; }
.srch-empty .srch-h1 { margin-bottom: 6px; }
.srch-empty .muted { font-size: 13px; }
.srch-dym { margin-top: 12px; font-size: 14px; color: var(--text-dim); }
.srch-dym a { color: var(--accent); font-weight: 800; }
.srch-dym a:hover { text-decoration: underline; }

/* Phase 51 — suggest 键盘高亮 + 匹配高亮 */
.sg-i.is-active { background: var(--accent-soft); outline: 1px solid var(--glow-border); }
.srch-suggest mark { background: transparent; color: var(--accent); font-weight: 800; }

/* Phase 51 — 结果区张数 + 排序/筛选栏（移动端优先：可横滑，胶囊化 select） */
.srch-sec-n { font-size: 12px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--glow-border); padding: 1px 9px; border-radius: 999px; margin-left: 8px; }
.srch-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.srch-fl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; padding: 5px 6px 5px 12px; }
.srch-fl > span { white-space: nowrap; }
.srch-fl select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: var(--text); font-size: 13px; font-weight: 700; padding: 3px 22px 3px 4px; border-radius: 999px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ff2b7a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.srch-fl select option { background: #14141d; color: var(--text); }
.srch-fl-check { cursor: pointer; padding: 7px 14px; }
.srch-fl-check input { accent-color: var(--accent); width: 15px; height: 15px; }
.srch-fl-reset { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: var(--text-dim); background: var(--glass); border: 1px solid var(--glass-border); font-size: 16px; }
.srch-fl-reset:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 639px) {
    .srch-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .srch-filters::-webkit-scrollbar { display: none; }
    .srch-fl { flex: 0 0 auto; }
}

/* 侧栏 */
.srch-side { display: flex; flex-direction: column; gap: 14px; }
.srch-side-block { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 14px; }
.srch-side-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.srch-side-head h3 { font-size: 14px; font-weight: 800; margin: 0; position: relative; padding-left: 11px; }
.srch-side-head h3::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.srch-side-clear { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 12px; }
.srch-side-clear:hover { color: var(--accent); }
.chip-recent::before { content: "↺"; margin-right: 5px; opacity: .7; }

/* 热门搜索榜（侧栏排行） */
.hot-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hot-rank li a { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: 10px; }
.hot-rank li a:hover { background: var(--accent-soft); }
.hot-rank-n { flex: 0 0 auto; width: 22px; text-align: center; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.hot-rank-n.is-top { color: var(--accent); }
.hot-rank-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 相关推荐（作品 mini list） */
.rec-list { display: flex; flex-direction: column; gap: 10px; }
.rec-item { display: flex; gap: 10px; align-items: center; }
.rec-thumb { flex: 0 0 auto; width: 44px; height: 58px; border-radius: 8px; background: #1c1c28 center/cover no-repeat; }
.rec-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rec-title { font-size: 13px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-sub { font-size: 11.5px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 移动端：搜索栏吸顶偏移随 header 调整 */
@media (max-width: 767px) {
    .srch-top { top: 116px; }
    .srch-submit { padding: 0 16px; }
    .srch-sec { scroll-margin-top: 188px; }
}

/* PC：双栏 + 吸顶偏移修正（header 行式更矮） */
@media (min-width: 1024px) {
    .srch-top { top: 105px; }
    .srch-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 28px; }
    .srch-side { position: sticky; top: 168px; }
    .srch-sec { scroll-margin-top: 172px; }
    .srch-suggest { left: 0; right: auto; width: calc(100% - 348px); }
}

/* ============================================================
   UI Phase 28 — Browse Premium（Netflix Browse / FANZA·DMM 分类页）
   统一 Banner + 排序/筛选栏 + 顶部统计 + 空结果 + 分页优化
   分类 / 标签 / 系列 / 厂商 / 专题 共用；作品卡沿用 Phase 22
   ============================================================ */

/* 统一浏览 Banner（沿用 Phase 23 影院风：背景横图 + 多层渐变 + 徽章 + 统计） */
.bhero {
    position: relative; overflow: hidden;
    margin: 14px 0 16px; border-radius: var(--radius);
    border: 1px solid var(--glass-border);
    background: var(--bg-elev); box-shadow: var(--shadow);
    isolation: isolate;
}
.bhero::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image: var(--bhero-bg, none);
    background-size: cover; background-position: center;
    transform: scale(1.06); filter: saturate(115%);
}
.bhero-shade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(0deg,  rgba(5,5,9,.95) 4%, rgba(5,5,9,.4) 48%, rgba(5,5,9,.2) 100%),
        linear-gradient(90deg, rgba(5,5,9,.9) 0%, rgba(5,5,9,.28) 55%, transparent 92%);
}
.bhero-inner {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; gap: 9px;
    min-height: 178px; justify-content: flex-end;
    padding: 18px 16px 16px;
}
.bhero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.bhero-title { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.15; text-shadow: 0 2px 18px rgba(0,0,0,.7); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bhero-desc { margin: 0; font-size: 13px; color: rgba(255,255,255,.82); max-width: 760px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.bhero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.bstat { font-size: 12px; color: rgba(255,255,255,.85); padding: 5px 11px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--glass-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bstat b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 4px; }

/* 排序 / 筛选栏 */
.browse-controls { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.browse-bar { display: flex; align-items: center; gap: 10px; }
.browse-bar-label { font-size: 12px; font-weight: 700; color: var(--text-dim); flex: 0 0 auto; }
.seg-scroll { overflow-x: auto; max-width: 100%; -ms-overflow-style: none; scrollbar-width: none; }
.seg-scroll::-webkit-scrollbar { display: none; height: 0; }
.seg-scroll a { white-space: nowrap; }
.browse-filter { margin: 0; }

/* 空结果（复用 .srch-empty）：补一组返回入口 */
.browse-empty { padding: 36px 16px 24px; }

/* 分页优化：首/末跳转 + 当前页信息 + 省略号 */
.pagination .pg-jump { font-weight: 800; }
.pagination .pg-ellipsis { background: transparent; border-color: transparent; color: var(--text-dim); padding-left: 4px; padding-right: 4px; }
.pagination .is-disabled { opacity: .4; pointer-events: none; }
.pagination-info { text-align: center; font-size: 12px; color: var(--text-dim); margin: 10px 0 0; font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
    .bhero-inner { min-height: 240px; padding: 26px 30px 24px; gap: 11px; }
    .bhero-title { font-size: 34px; }
    .bhero-desc { font-size: 14px; }
    .browse-controls { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
    .browse-filter { flex: 1 1 100%; }
}
@media (min-width: 1024px) {
    .bhero-inner { min-height: 280px; padding: 32px 40px 28px; }
    .bhero-title { font-size: 40px; }
}


/* ============================================================
   UI Phase 30 — 首页 Premium 整合（内容流）
   统一「查看更多」按钮 + 作品状态徽章(HOT/TRENDING/POPULAR/NEW)
   + 今日/本周/本月热门女优 CSS 分段切换
   ============================================================ */

/* 统一「查看更多」按钮 */
.more-btn,
.section-head a.more-btn {
    display: inline-flex; align-items: center; gap: 4px;
    flex: 0 0 auto; white-space: nowrap;
    font-size: 12.5px; font-weight: 700; line-height: 1;
    color: var(--text-dim);
    padding: 7px 13px; border-radius: 999px;
    background: var(--glass); border: 1px solid var(--glass-border);
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .12s ease;
}
.more-btn:hover,
.section-head a.more-btn:hover {
    color: #fff; border-color: var(--accent);
    background: var(--accent-soft); transform: translateX(2px);
}

/* 作品卡状态徽章（右上角，区别于左上角分类/画质 .cbadges） */
.cbadge-status {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    box-shadow: 0 4px 12px rgba(0,0,0,.45);
}
.sbadge-new { color: #04210f; background: linear-gradient(135deg, #34d399, #10b981); }

/* 今日/本周/本月 热门女优：纯 CSS 分段切换（radio + ~ 兄弟选择器） */
.aperiods { position: relative; }
.aperiod-radio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.aperiods-head { gap: 12px; flex-wrap: wrap; }
.aperiods-tabs { display: inline-flex; gap: 4px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; padding: 4px; }
.aperiod-tab {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 34px; padding: 6px 16px; border-radius: 999px;
    font-size: 13px; font-weight: 700; color: var(--text-dim);
    cursor: pointer; user-select: none; transition: color .15s ease, background .15s ease;
}
.aperiod-tab:hover { color: var(--text); }
#aperiod-today:checked ~ .aperiods-head .aperiod-tab-today,
#aperiod-week:checked ~ .aperiods-head .aperiod-tab-week,
#aperiod-month:checked ~ .aperiods-head .aperiod-tab-month,
#aperiod-all:checked ~ .aperiods-head .aperiod-tab-all {
    color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 4px 12px rgba(255,43,122,.4);
}
.aperiods-panel { display: none; }
#aperiod-today:checked ~ .aperiods-panels .aperiods-panel-today,
#aperiod-week:checked ~ .aperiods-panels .aperiods-panel-week,
#aperiod-month:checked ~ .aperiods-panels .aperiods-panel-month,
#aperiod-all:checked ~ .aperiods-panels .aperiods-panel-all { display: block; }

/* ============================================================
   UI Phase 31 — 作品详情页 Premium（FANZA 商品页 / DMM TV / Netflix Detail）
   可见面包屑 + 大背景 Hero + PC 双栏(左内容/右 sticky 购买) + 收藏/分享
   ============================================================ */

/* 可见面包屑 */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; font-size: 12.5px; color: var(--text-dim); }
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--accent); }
.crumbs .crumb-sep { opacity: .5; }
.crumbs .crumb-cur { color: var(--text); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 大背景 Hero */
.wdx { position: relative; }
.wdx-hero { position: relative; margin: 8px -16px 0; overflow: hidden; min-height: 252px; isolation: isolate; } /* UI Phase 50：移动端 Hero 高度 -26% */
.wdx-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 18%; transform: scale(1.06); filter: saturate(112%); }
.wdx-hero-shade { position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(0deg, var(--bg) 3%, rgba(5,5,9,.55) 42%, rgba(5,5,9,.35) 100%),
    linear-gradient(90deg, rgba(5,5,9,.78) 0%, rgba(5,5,9,.2) 60%, transparent 90%); }
.wdx-hero-inner { position: relative; z-index: 2; display: flex; gap: 14px; align-items: flex-end; padding: 56px 16px 16px; max-width: var(--maxw); margin: 0 auto; }
.wdx-cover { position: relative; flex: 0 0 auto; width: 122px; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; background: #1c1c28 center/cover no-repeat; border: 1px solid var(--glass-border); box-shadow: var(--shadow); transition: transform .2s ease; }
a.wdx-cover:hover { transform: translateY(-3px); }
.wdx-cover .ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-dim); font-size: 12px; }
.wdx-cover-badges { position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.wdx-cover .poster-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; font-size: 15px; color: #fff; border-radius: 50%; background: rgba(255,43,122,.92); box-shadow: 0 10px 28px rgba(255,43,122,.5); }
.wdx-headline { min-width: 0; flex: 1 1 auto; }
.wdx-title { font-size: 19px; font-weight: 900; line-height: 1.22; margin: 5px 0 6px; text-shadow: 0 2px 18px rgba(0,0,0,.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wdx-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 2px; }
.wdx-facts .fact { font-size: 12px; color: rgba(255,255,255,.86); padding: 4px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); }
.wdx-facts .fact-code { font-family: ui-monospace, monospace; letter-spacing: .3px; }
.wdx-facts .fact-rating { display: inline-flex; align-items: center; gap: 2px; }
.wdx-facts .fact-rating .star { color: rgba(255,255,255,.2); font-size: 13px; }
.wdx-facts .fact-rating .star.on { color: var(--accent-2); }
.wdx-facts .fact-rating .star.half { background: linear-gradient(90deg, var(--accent-2) 50%, rgba(255,255,255,.2) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wdx-facts .fact-rating b { margin-left: 5px; color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.wdx-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.wdx-hero-actions .btn-cta-lg { flex: 1 1 auto; min-height: 42px; font-size: 14px; } /* UI Phase 50：购买按钮缩小 */

/* 收藏 / 分享 按钮组 */
.wdx-act-group { display: flex; gap: 8px; }
.wdx-act { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 46px; border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); background: var(--glass); border: 1px solid var(--glass-border); transition: color .15s ease, border-color .15s ease, background .15s ease; }
.wdx-act:hover { border-color: var(--accent); }
.wdx-act .wdx-act-ico { font-size: 15px; line-height: 1; color: var(--text-dim); transition: color .15s ease, transform .15s ease; }
.wdx-act.js-fav.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.wdx-act.js-fav.is-on .wdx-act-ico { color: var(--accent); transform: scale(1.1); }

/* 两栏正文 */
.wdx-body { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
.wdx-side { display: none; }

/* 右侧购买面板 */
.wdx-buy { display: flex; flex-direction: column; gap: 12px; border-color: rgba(255,43,122,.3); box-shadow: 0 10px 30px rgba(255,43,122,.12); }
.wdx-buy-rating { display: flex; align-items: center; gap: 8px; }
.wdx-buy-rating .wd-rating .star { font-size: 17px; }
.wdx-buy-rating b { font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.wdx-buy .cta-row { margin: 0; }
.wdx-buy .btn-cta-lg { width: 100%; min-height: 44px; font-size: 15px; }
.wdx-buy .multi-cta { margin: 0; }
.wdx-buy .wdx-act-group { display: grid; grid-template-columns: 1fr 1fr; }
.wdx-buy .wdx-act { justify-content: center; }
.wdx-quickspec { display: grid; gap: 0; margin: 0; font-size: 13px; }
.wdx-quickspec > div { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--glass-border); }
.wdx-quickspec > div:last-child { border-bottom: 0; }
.wdx-quickspec dt { margin: 0; color: var(--text-dim); }
.wdx-quickspec dd { margin: 0; color: var(--text); word-break: break-word; }
.wd-meta-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* toast（复制成功提示） */
.wdx-toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 12px); z-index: 300; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: var(--glass-strong); border: 1px solid var(--glow-border); box-shadow: var(--shadow); backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.wdx-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 移动端：给吸底购买条留位 */
@media (max-width: 639px) {
    .wdx { padding-bottom: calc(var(--botnav-h) + 64px); }
}

/* PC 双栏 + 大 Hero */
@media (min-width: 768px) {
    .wdx-hero { margin: 10px 0 0; border-radius: var(--radius); min-height: 320px; }
    .wdx-hero-inner { padding: 84px 30px 24px; gap: 22px; }
    .wdx-cover { width: 178px; }
    .wdx-title { font-size: 27px; }
    .wdx-cover .poster-play { width: 56px; height: 56px; font-size: 18px; }
}
@media (min-width: 1024px) {
    .wdx-body { grid-template-columns: minmax(0, 1fr) 326px; gap: 28px; align-items: start; }
    .wdx-side { display: block; position: sticky; top: 112px; }
    .wdx-hero-actions { display: none; }
    .wdx-hero { min-height: 348px; }
    .wdx-title { font-size: 31px; }
}

/* ============================================================
   Phase 50 — Movie Detail Premium V2（对标 FANZA 2025，移动端优先）
   复用 .wdx-hero / .wdx-body / .wdx-side 外壳，重构主列内容 .wd2-*
   ============================================================ */
.wd2-main { display: flex; flex-direction: column; gap: 22px; }
.wd2-section { margin: 0; }
.wd2-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.wd2-head h2 { font-size: 17px; font-weight: 800; margin: 0; position: relative; padding-left: 12px; }
.wd2-head h2::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.wd2-head .wd2-count, .wd2-head .wd2-qtag { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--glow-border); padding: 2px 8px; border-radius: 999px; line-height: 1.6; }
.wd2-head .wd2-qtag { color: #fff; background: rgba(255,43,122,.92); border: 0; letter-spacing: .3px; }

/* ② 商品コメント（靠前 + 长文折叠/展开） */
.wd2-comment { position: relative; padding: 16px; line-height: 1.8; font-size: 14.5px; color: var(--text); }
.wd2-comment-body { overflow: hidden; max-height: 7.4em; transition: max-height .35s ease; -webkit-mask-image: linear-gradient(180deg,#000 62%,transparent); mask-image: linear-gradient(180deg,#000 62%,transparent); }
.wd2-comment.is-open .wd2-comment-body { max-height: 4000px; -webkit-mask-image: none; mask-image: none; }
.wd2-comment-toggle { margin-top: 10px; background: none; border: 0; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; padding: 4px 0; }
.wd2-comment-toggle .t-less { display: none; }
.wd2-comment.is-open .wd2-comment-toggle .t-more { display: none; }
.wd2-comment.is-open .wd2-comment-toggle .t-less { display: inline; }

/* ③ 女优区（出演者：移动端横向滑动卡） */
.wd2-cast { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wd2-cast::-webkit-scrollbar { display: none; }
.wd2-cast-card { flex: 0 0 auto; width: 88px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: inherit; }
.wd2-cast-card .av-sm { width: 76px; height: 76px; transition: transform .2s ease, box-shadow .2s ease; }
.wd2-cast-card:hover .av-sm { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--accent), 0 8px 20px rgba(0,0,0,.4); }
.wd2-cast-name { font-size: 12.5px; font-weight: 700; line-height: 1.25; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd2-cast-count { font-size: 11px; color: var(--text-dim); }

/* ④ 作品信息区（FANZA 商品詳細 dl 表） */
.wd2-spec { display: grid; gap: 0; padding: 4px 16px; margin: 0; }
.wd2-spec > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--glass-border); font-size: 13.5px; }
.wd2-spec > div:last-child { border-bottom: 0; }
.wd2-spec dt { margin: 0; color: var(--text-dim); }
.wd2-spec dd { margin: 0; color: var(--text); word-break: break-word; }
.wd2-spec dd.mono { font-family: ui-monospace, monospace; letter-spacing: .3px; }
.wd2-spec dd a.link, .wd2-spec dd.link { color: var(--accent); }
.wd2-spec-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.wd2-spec-links a { color: var(--accent); font-weight: 700; }
.wd2-spec-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wd2-spec .wd-rating .star { font-size: 14px; }
.wd2-spec .wd-rating + b { color: #fff; font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
    .wd2-main { gap: 28px; }
    .wd2-head h2 { font-size: 19px; }
    .wd2-cast-card { width: 96px; }
    .wd2-cast-card .av-sm { width: 84px; height: 84px; }
    .wd2-comment { padding: 20px; }
}

/* UI Phase 50 — Hero 标签折叠（最多 4 个 + ＋N）/ サンプル次按钮 */
.wd-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.wd-badges .tbadge-extra { display: none; }
.wd-badges.is-open .tbadge-extra { display: inline-flex; }
.tbadge-more { cursor: pointer; border: 1px dashed var(--glass-border); background: rgba(255,255,255,.06); color: var(--text); font-weight: 700; }
.wdx-hero-actions .btn-sample { flex: 0 0 auto; min-height: 42px; padding: 0 16px; font-size: 13px; }
@media (min-width: 1024px) { .wdx-hero-actions .btn-sample { display: none; } } /* PC 右栏有完整 CTA，Hero 次按钮收起 */

/* UI Phase 32 — 运营徽章补充：FEATURED / RECOMMENDED（配合 HOT/TRENDING/POPULAR/NEW） */
.sbadge-featured { color: #2a1a02; background: linear-gradient(135deg, var(--accent-2), #ffd24a); }
.sbadge-recommended { color: #04241f; background: linear-gradient(135deg, #2dd4bf, #14b8a6); }

/* ============================================================
   UI Phase 33 — 女优中心 Premium（FANZA Actress / DMM Actress / Netflix Cast）
   大头像 Hero + PC 双栏 + 作品时间轴 + 相关女优 + 排行榜入口
   ============================================================ */
.acx { position: relative; }

/* 顶部 Hero（大背景 + 大头像 + 名称 + 统计 + 徽章） */
.acx-hero { position: relative; margin: 8px -16px 0; overflow: hidden; min-height: 300px; isolation: isolate; }
.acx-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 22%; transform: scale(1.06); filter: saturate(112%); }
.acx-hero-shade { position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(0deg, var(--bg) 3%, rgba(5,5,9,.55) 44%, rgba(5,5,9,.32) 100%),
    linear-gradient(90deg, rgba(5,5,9,.78) 0%, rgba(5,5,9,.2) 62%, transparent 92%); }
.acx-hero-inner { position: relative; z-index: 2; display: flex; gap: 16px; align-items: flex-end; padding: 80px 16px 18px; max-width: var(--maxw); margin: 0 auto; }
.acx-avatar { flex: 0 0 auto; }
.acx-avatar .av-lg { width: 116px; height: 116px; box-shadow: 0 0 0 3px var(--accent), 0 10px 30px rgba(0,0,0,.5); }
.acx-id { min-width: 0; flex: 1 1 auto; }
.acx-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.hbadge.trend { background: linear-gradient(135deg, var(--accent-2), #ffd24a); color: #2a1a02; }
.acx-name { font-size: 24px; font-weight: 900; line-height: 1.15; margin: 0 0 8px; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.acx-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acx-facts .fact { font-size: 12px; color: rgba(255,255,255,.86); padding: 4px 11px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); }
.acx-facts .fact b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 3px; }
.acx-facts .fact-heat { color: var(--accent-2); }
.acx-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* 双栏 */
.acx-body { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
.acx-side-card { display: flex; flex-direction: column; gap: 12px; }
.acx-rank-btn { display: block; width: 100%; text-align: center; min-height: 44px; line-height: 24px; padding: 10px 14px; border-radius: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--glow); }
.acx-rank-btn:hover { filter: brightness(1.06); }
.btn-block { width: 100%; }

/* 作品时间轴 */
.acx-timeline .tl-year { margin: 14px 0 6px; }
.tl-year-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; padding-left: 13px; position: relative; }
.tl-year-head::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.tl-year-num { font-size: 20px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.tl-year-num:hover { color: var(--accent); }
.tl-year-count { font-size: 12px; color: var(--text-dim); }

/* ============================================================
   Phase 52 — Actress Premium Center（JavDB / FANZA Actress / Netflix）
   单列 Netflix 风：统计卡片 rail + 排行榜 + 关系网，无表格
   ============================================================ */
.acx2-sec { margin: 22px 0; }
.acx-hero-actions .acx-rank-btn { width: auto; display: inline-flex; align-items: center; gap: 6px; }
.acx-facts .fact-rank b { color: var(--accent-2); }
.js-afav.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.js-afav.is-on .afav-ico { color: var(--accent); }

/* ② 女优统计——横向卡片（替代表格/数据库样式） */
.acx2-stats { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.acx2-stats::-webkit-scrollbar { display: none; }
.acx2-stat { flex: 0 0 auto; min-width: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 13px 12px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border); color: inherit; }
.acx2-stat b { font-size: 19px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.acx2-stat span { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.acx2-stat-top { flex-direction: row; min-width: 200px; gap: 10px; align-items: center; text-align: left; }
.acx2-stat-top:hover { border-color: var(--accent); }
.acx2-top-thumb { flex: 0 0 auto; width: 40px; height: 54px; border-radius: 8px; background: #1c1c28 center/cover no-repeat; }
.acx2-top-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acx2-top-tx b { font-size: 12px; color: var(--accent-2); }
.acx2-top-tx span { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acx2-tags { margin-top: 14px; }

/* 时间轴：<details> 可展开 */
details.tl-year > summary { list-style: none; cursor: pointer; align-items: center; }
details.tl-year > summary::-webkit-details-marker { display: none; }
details.tl-year > summary::after { content: "▾"; margin-left: auto; color: var(--text-dim); transition: transform .2s ease; }
details.tl-year[open] > summary::after { transform: rotate(180deg); }

/* ④' 女优排行榜 */
.acx-lead-tabs { display: inline-flex; gap: 4px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; padding: 4px; margin-bottom: 12px; }
.acx-lead-tab { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text-dim); }
.acx-lead-tab.is-active { background: var(--accent); color: #fff; }
.acx-lead { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; scroll-margin-top: 120px; }
.acx-lead li a { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border); color: inherit; }
.acx-lead li a:hover { border-color: var(--accent); }
.acx-lead-n { flex: 0 0 auto; width: 24px; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.acx-lead-n.is-top { color: var(--accent); }
.acx-lead .av-sm { width: 46px; height: 46px; }
.acx-lead-name { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acx-lead-c { flex: 0 0 auto; font-size: 12px; color: var(--text-dim); }

/* 全部作品排序段（移到 section head 右侧） */
.wd2-head .acx-sort { margin-left: auto; }

@media (min-width: 768px) {
    .acx-hero { margin: 10px 0 0; border-radius: var(--radius); min-height: 360px; }
    .acx-hero-inner { padding: 110px 30px 24px; gap: 22px; }
    .acx-avatar .av-lg { width: 150px; height: 150px; }
    .acx-name { font-size: 32px; }
}
@media (min-width: 1024px) {
    .acx-body { grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; }
    .acx-side { position: sticky; top: 112px; }
}

/* ============================================================
   UI Phase 34 — Collections Premium Center（Netflix Collection / FANZA·DMM 特集）
   专题 Hero(封面+拼图自动封面) + PC 双栏 + 专题内热门女优/标签 + 相关专题
   ============================================================ */
.colx { position: relative; }

/* 专题 Hero */
/* UI Phase 50：专题 Hero 全宽 + 封面拼图氛围底（修复左上小框+黑屏） */
.colx-hero { position: relative; margin: 8px -16px 0; overflow: hidden; min-height: 240px; isolation: isolate; background: linear-gradient(135deg, var(--accent-soft), rgba(255,159,28,.14)); }
.colx-hero-bg { position: absolute; inset: 0; display: flex; }
.colx-hero-tile { flex: 1 1 0; min-width: 0; background-size: cover; background-position: center; transform: scale(1.1); filter: blur(3px) saturate(116%) brightness(.82); }
.colx-hero-shade { position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(0deg, var(--bg) 3%, rgba(5,5,9,.55) 44%, rgba(5,5,9,.32) 100%),
    linear-gradient(90deg, rgba(5,5,9,.78) 0%, rgba(5,5,9,.2) 62%, transparent 92%); }
.colx-hero-inner { position: relative; z-index: 2; display: flex; gap: 16px; align-items: flex-end; padding: 84px 16px 18px; max-width: var(--maxw); margin: 0 auto; }

/* 封面（手动 / 自动拼图） */
.colx-cover { flex: 0 0 auto; width: 132px; }
.colx-cover-img { position: relative; display: block; width: 100%; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: #1c1c28 center/cover no-repeat; border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
.colx-cover-img .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--text-dim); padding: 8px; text-align: center; }
.colx-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; width: 100%; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
.colx-collage-cell { background: #1c1c28 center/cover no-repeat; }

.colx-id { min-width: 0; flex: 1 1 auto; }
.colx-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 7px; }
.colx-title { font-size: 22px; font-weight: 900; line-height: 1.18; margin: 0 0 6px; text-shadow: 0 2px 18px rgba(0,0,0,.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.colx-desc { margin: 0 0 8px; font-size: 13px; color: rgba(255,255,255,.82); max-width: 720px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.colx-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.colx-facts .fact { font-size: 12px; color: rgba(255,255,255,.86); padding: 4px 11px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); }
.colx-facts .fact b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 3px; }
.colx-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.colx-hero-actions .btn-cta-lg { min-height: 46px; }

/* 双栏 */
.colx-body { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }

@media (min-width: 768px) {
    .colx-hero { margin: 10px 0 0; border-radius: var(--radius); min-height: 340px; }
    .colx-hero-inner { padding: 110px 30px 24px; gap: 22px; }
    .colx-cover { width: 200px; }
    .colx-title { font-size: 30px; }
}
@media (min-width: 1024px) {
    .colx-body { grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; }
    .colx-side { position: sticky; top: 112px; }
}

/* UI Phase 35 — Tag Center：复用 .colx-* 专区布局；Hero 内排行榜按钮收成行内宽度 */
.colx-hero-actions .acx-rank-btn { display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 44px; }

/* ============================================================
   卡封面焦点裁切（card-image-position）
   宽版 DVD jacket(*pl) 主体在右半 → 右对齐，避免在竖卡里被裁掉；
   竖版封面 / 截图 → 居中。同时覆盖 background-image 卡片与 <img> 两种渲染。
   仅作用于卡片缩略图（.card-thumb/.lcard-thumb/.t10-media/.hero-slide 带 cover-pos-*），
   不影响详情页大图 / sample gallery / sample video。
   ============================================================ */
.cover-pos-right .card-media,
.cover-pos-right .lcard-media,
.cover-pos-right .t10-poster,
.cover-pos-right .hero-bg { background-position: right center; }
.cover-pos-center .card-media,
.cover-pos-center .lcard-media,
.cover-pos-center .t10-poster { background-position: right center; } /* 统一靠右 */
.cover-pos-center .hero-bg { background-position: center center; }
.cover-pos-top .card-media,
.cover-pos-top .lcard-media,
.cover-pos-top .t10-poster { background-position: right center; } /* 统一靠右 */
.cover-pos-top .hero-bg { background-position: center top; }

/* <img> 形式（x-img / picture）：卡片封面一律靠右（女优主体优先） */
.cover-pos-right img { object-fit: cover; object-position: right center; }
.cover-pos-center img { object-fit: cover; object-position: right center; }
.cover-pos-top img { object-fit: cover; object-position: right center; }

/* Sample-Video Rollback：弃用 litevideo iframe 播放器（会显示 FANZA 年龄确认页）。
   详情页样品视频改回「封面 + 播放钮 + 暗色渐变 → 点击跳 FANZA 联盟链接」(.wd-video，见上)。 */
/* 卡片 Preview 徽章（首页只标记，不自动播放、不 embed） */
.cbadge-preview { background: rgba(255,43,122,.92); color: #fff; font-weight: 700; }

/* ============================================================
   UI Phase 57 — 移动端首页「大卡片」（≤768px）
   ------------------------------------------------------------
   目标：手机首页作品行（新着/最近更新/おすすめ/VR/丝袜/Collection rail/Tag rail = .row-land）
   与排行行（ランキング = .top10-rail）放大为大卡——一行约 2 个、封面更高、标题/女优名更大更清晰，
   减少一屏密度、不累眼。section 间距加大；横滑、隐藏滚动条；badge 略小不喧宾夺主（最多 2 个已在
   card-badges 限制、PLAY ▶ 保留）。
   作用域：本块置于文件末尾、单类选择器，仅在 ≤768px 覆盖 base 与 (min-width:640) 规则；
   PC（≥769px，命中 min-width:1024 等）完全不受影响。纯前台 CSS，不触碰任何业务模块。
   ============================================================ */
@media (max-width: 768px) {
    /* —— Section：标题更大、上下间距更松（每个 section ≥ 24px 间距，需求 #6） —— */
    .section { margin: 28px 0; }
    .section:first-child { margin-top: 14px; }
    .section-head { margin-bottom: 16px; }
    .section-head h2 { font-size: 20px; }
    .section-head h2::before { height: 19px; }
    .section-sub { font-size: 12.5px; }

    /* —— 作品行（.row.row-land）：横滑大卡，一行约 2 个，gap 16px，左右各 16px（容器 padding 提供） —— */
    .row.row-land {
        grid-auto-columns: clamp(160px, 44vw, 220px);  /* ≥44vw、≥160px：一行最多 2 个，不再 3 小卡（#2/#3） */
        gap: 16px;                                       /* #8 */
        scroll-padding-left: 16px;
    }
    /* 大卡：≥240px 高、封面 ≥150px、圆角更柔（#3） */
    .row.row-land .lcard { border-radius: 18px; }
    /* UI Phase 60：行内大卡封面也统一竖版海报 2:3（原 Phase 57 固定 152px 横版高度已废弃） */
    .row.row-land .lcard-thumb { aspect-ratio: 2 / 3; height: auto; flex: 0 0 auto; }
    .row.row-land .lcard-info { padding: 11px 12px 13px; gap: 4px; }
    /* 标题：15px / 700 / 2 行 / 1.35（#4） */
    .row.row-land .lcard-title { font-size: 15px; font-weight: 700; line-height: 1.35; -webkit-line-clamp: 2; }
    /* 女优名：13px / 粉色（既有 var(--accent)）/ 1 行（#5） */
    .row.row-land .lcard-actress { font-size: 13px; }

    /* —— 排行行（ランキング = .top10-rail）：同样一行约 2 个大卡（#2） —— */
    .top10-rail { gap: 16px; padding: 4px 0 12px; }
    .top10-card { width: clamp(160px, 44vw, 220px); }
    .t10-title { font-size: 14px; line-height: 1.32; }
    .t10-sub { font-size: 13px; }

    /* —— Badge：略小、不遮挡封面主体（最多 2 个 + PLAY ▶ 已在 card-badges 处理，#7） —— */
    .cbadge { font-size: 9.5px; padding: 3px 6px; }

    /* —— 横滑：隐藏滚动条（基础 scrollbar-hide 已覆盖，这里对大卡行兜底，#8） —— */
    .row.row-land, .top10-rail { -ms-overflow-style: none; scrollbar-width: none; }
    .row.row-land::-webkit-scrollbar, .top10-rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* ============================================================
   UI Phase 58 — Movie Detail Mobile UX Pro（作品详情页移动端，对标 JavDB / Netflix / FANZA Mobile）
   ------------------------------------------------------------
   ① 首屏压缩 ~28%  ② 封面+信息更紧凑  ③ 购买钮缩小·保持吸底  ④ 样图横滑大图
   ⑤ 女优头像横滑  ⑥ 相关推荐 2 列大卡  ⑦ 评论视觉强化  ⑧ 作品统计三连  ⑨ 阅读体验
   作用域：详情页专属类（.wdx-* / .wd2-*），移动 ≤767px；PC ≥768px 命中既有 min-width:768/1024
   规则不受影响。纯前台 CSS（+ blade/helper/lang 展示层），不触碰任何业务模块。
   ============================================================ */

/* ⑧ 作品统计三连（浏览 / 收藏 / 评分人数）—— 全视口可见，玻璃卡三等分 */
.wd2-stats { display: flex; gap: 10px; margin: 0 0 18px; }
.wd2-stat {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 12px 8px; border-radius: 14px; text-align: center;
    background: var(--bg-elev); border: 1px solid var(--glass-border);
}
.wd2-stat-num { font-size: 19px; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 3px; }
.wd2-stat-ic { color: var(--accent); font-size: 15px; }
.wd2-stat-sub { font-size: 12px; color: var(--text-dim); font-weight: 700; }
.wd2-stat-lbl { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

@media (max-width: 767px) {
    /* ① 首屏压缩 ~28%（Hero 252→182px）+ ② 封面/信息更紧凑 */
    .wdx-hero { min-height: 182px; }
    .wdx-hero-inner { padding: 40px 14px 14px; gap: 12px; }
    .wdx-cover { width: 104px; border-radius: 11px; }
    .wdx-cover .poster-play { width: 40px; height: 40px; font-size: 13px; }
    .wdx-title { font-size: 17px; line-height: 1.28; }
    .wd-actress { font-size: 12.5px; }
    .wdx-facts { gap: 6px; margin: 6px 0 2px; }
    .wdx-facts .fact { padding: 3px 8px; font-size: 11.5px; }

    /* ③ 购买按钮缩小（Hero 内）—— 吸底条保留（.sticky-cta 不动其显示逻辑，仅微调高度仍 ≥44 触控） */
    .wdx-hero-actions { gap: 7px; margin-top: 10px; }
    .wdx-hero-actions .btn-cta-lg { min-height: 38px; font-size: 13px; }
    .wdx-hero-actions .btn-sample { min-height: 38px; padding: 0 13px; font-size: 12.5px; }
    .sticky-cta .btn-cta-lg { min-height: 46px; font-size: 14px; }
    .sticky-cta .btn-cta-sm { min-height: 46px; min-width: 46px; }

    /* ⑧ 统计三连：移动端略紧凑 */
    .wd2-stats { gap: 8px; margin-bottom: 16px; }
    .wd2-stat { padding: 10px 6px; }
    .wd2-stat-num { font-size: 17px; }

    /* ④ 样图改横向滑动大图（详情页 .wd2-gallery 专属，不影响 PC 网格）。
       用 grid-auto-flow:column（同 .row-land 横滑骨架）避免 flex 撑破容器导致整页横向溢出。 */
    .wdx-main { min-width: 0; }   /* 兜底：grid 列轨不被横滑内容撑宽 */
    .wd2-gallery .wd-samples {
        display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 78vw, 360px);
        grid-template-columns: none; gap: 12px;
        overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
        -ms-overflow-style: none; scrollbar-width: none;
    }
    .wd2-gallery .wd-samples::-webkit-scrollbar { display: none; height: 0; }
    .wd2-gallery .sample-item {
        scroll-snap-align: start; border-radius: 14px; overflow: hidden;
        border: 1px solid var(--glass-border);
    }
    .wd2-gallery .sample-item img { width: 100%; height: auto; display: block; }

    /* ⑤ 女优头像横滑（已横滑，放大头像、加大间距更舒展） */
    .wd2-cast { gap: 16px; }
    .wd2-cast-card { width: 92px; }
    .wd2-cast-card .av-sm { width: 82px; height: 82px; }
    .wd2-cast-name { font-size: 13px; max-width: 92px; }

    /* ⑥ 相关推荐 2 列大卡（.wd2-rec-grid 基于 .grid，移动端本就 2 列；锁定 2 列 + 加大标题） */
    .wd2-rec-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .wd2-rec-grid .card-title { font-size: 14.5px; line-height: 1.34; }
    .wd2-rec-grid .card-actress { font-size: 12.5px; }

    /* ⑦ 商品コメント视觉强化（左侧粉色引导条 + 柔和底 + ⑨ 更易读的字号/行高） */
    .wd2-comment {
        font-size: 15px; line-height: 1.85; padding: 16px 16px 16px 18px;
        border-left: 3px solid var(--accent);
        background: linear-gradient(180deg, rgba(255,43,122,.06), rgba(255,255,255,.015));
    }
    .wd2-comment-body { max-height: 8.2em; }

    /* ⑨ 阅读体验：规格表字号微增（section 间距由 .wd2-main flex gap 提供，已舒展） */
    .wd2-spec { font-size: 13.5px; }
}

/* ============================================================
   UI Phase 59 — 列表页移动端大卡一致化（≤767px）
   ------------------------------------------------------------
   把 Phase 57 首页大卡延伸到**所有列表页**的作品网格 .grid + .card：
   /movies · /anime · /drama（category→works）· /search · /tag · /collection
   · /maker · /series · /year（aggregate→works）—— 全部经 partials/works 或 search 的 .grid。
   手机端统一 **2 列大卡** + 一致字号/间距；女优列表 .actress-grid 同步 2 列大头像。
   作用域：文件末尾、单类选择器，仅 ≤767px 覆盖既有 (min-width:540) 3 列 / (640) 4 列段；
   PC ≥768px 命中既有 min-width:640/1024/1280 多列规则**不受影响**。纯前台 CSS，不触碰任何业务。
   ============================================================ */

/* 修复 .colx 列表页（/tag · /collection）移动端横向溢出：移动 .colx-body 为单列 `1fr`（min=auto），
   列内横滑 rail 会把列轨撑到 ~2235px → 整页横向滚动。给主列 min-width:0 使横滑内容内部滚动而非撑破。
   （PC ≥1024 已是 minmax(0,1fr)，本规则对 PC 无副作用。同 Phase 58 .wdx-main 修法。） */
.colx-main { min-width: 0; }

@media (max-width: 767px) {
    /* 作品网格：全列表页统一 2 列大卡（覆盖 540→3 列 / 640→4 列 在 ≤767 段，靠源码顺序后置生效） */
    .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .card { border-radius: 18px; }
    .card-body { padding: 12px 12px 13px; }
    /* 标题 15px/700/2 行/1.35（与 Phase 57 首页大卡一致） */
    .card-title { font-size: 15px; font-weight: 700; line-height: 1.35; min-height: 2.7em; }
    /* 女优名 13px，粉色沿用 var(--accent) */
    .card-actress { font-size: 13px; }

    /* 女优列表：2 列大头像卡（/actresses · /hot-actresses），与作品列表同密度 */
    .actress-grid { grid-template-columns: repeat(2, 1fr); gap: 20px var(--gap); }
    .actress-grid .av-sm { width: 116px; height: 116px; }
    .actress-grid .av-sm.av-mono { font-size: 44px; }
    .actress-grid .actress-name { font-size: 14px; max-width: 150px; }
    .actress-grid .actress-count { font-size: 12px; }
}

/* ============================================================
   UI Phase 60 — 全站作品卡封面统一「竖版海报 2:3」标准（canonical）
   ------------------------------------------------------------
   问题：作品卡封面比例不统一（.lcard 原 16/9 横版、.card 3/4、.t10-poster 3/4），
   横/竖图混排导致卡片高度参差、视觉杂乱。
   标准：所有**列表/行内作品卡**封面容器统一 `aspect-ratio: 2/3`，封面图 cover 裁切填满，
   横向样品图/截图作封面时也裁切到 2:3、绝不撑开卡片。
   实现说明：本项目卡封面用 background-image 的 .*-media div（非 <img>，见 card-image-position-fix），
   故用 `background-size:cover` 等价 `object-fit:cover`；同时对可能的 <img> 写 object-fit 双保险。
   作用域：仅列表/行内作品卡封面容器；**不影响** Hero 背景(#7)、样图 gallery(#8)、详情主封面 .wdx-cover(#9)。
   统一类（#10，避免每页各写一套）：.cover-ratio-poster / .work-card-cover / .poster-card。
   ============================================================ */
.cover-ratio-poster, .work-card-cover, .poster-card,
.card-thumb, .lcard-thumb, .t10-poster {
    aspect-ratio: 2 / 3;
    overflow: hidden;
}
/* 封面填充：背景图 cover（等价 object-fit:cover）+ 居中；横图作封面裁切到 2:3 不撑卡（#3/#4/#5） */
.card-media, .lcard-media, .t10-poster {
    background-size: cover;
    background-position: right center; /* 全站统一：DVD 封面靠右 */
}
/* 若封面以 <img> 实现（统一类容器内），同样 cover 填满裁切 */
.cover-ratio-poster > img, .work-card-cover > img, .poster-card > img {
    width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: right center; /* 全站统一：DVD 封面靠右 */
}
/* 横版主体（FANZA pl.jpg 右侧主体）裁切偏右避免切掉人物：沿用 Phase 19 既有 .cover-pos-* 规则，无需重复。 */

/* 顺带修复 /ranking 与 /search 移动端横向溢出（pre-existing，与本期等高无关；同 colx/wdx min-width:0 修法）：
   .srch-main 为 1fr(min=auto) grid 项，被行内网格/横滑撑宽 → min-width:0 使其内部收敛；
   .rkc-list 基础为无列模板的单 auto 轨（被最宽行的 max-content 撑到 ~1154px）→ 移动端锁 minmax(0,1fr)。
   PC（min-width:768 的 .rkc-list 2 列 / .srch-layout minmax(0,1fr) 320px）不受影响。 */
.srch-main { min-width: 0; }
@media (max-width: 767px) {
    .rkc-list { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   UI Phase 63 — 品牌化错误页（404 / 500 / 503）。暗色主题，与全站一致；
   404 提供搜索框 + 热门作品 + 热门女优 + 返回入口（取代 Laravel 默认浅色裸页）。
   ============================================================ */
.err-page { padding: 18px 0 40px; }
.err-hero { text-align: center; padding: 40px 8px 28px; max-width: 640px; margin: 0 auto; }
.err-code {
    font-size: clamp(72px, 22vw, 132px); font-weight: 900; line-height: .9; letter-spacing: -4px;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(160deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 10px 30px rgba(255,43,122,.4));
}
.err-title { font-size: clamp(20px, 5.5vw, 28px); font-weight: 800; margin: 14px 0 8px; }
.err-sub { color: var(--text-dim); font-size: 14px; line-height: 1.7; margin: 0 auto 22px; max-width: 460px; }
.err-search { display: flex; gap: 8px; max-width: 440px; margin: 0 auto 18px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; padding: 5px 6px 5px 16px; }
.err-search input { flex: 1 1 auto; background: transparent; border: none; color: var(--text); font-size: 15px; outline: none; min-width: 0; }
.err-search input::placeholder { color: var(--text-dim); }
.err-search button { flex: 0 0 auto; background: var(--accent); color: #fff; border: none; border-radius: 999px; width: 44px; height: 44px; font-size: 18px; cursor: pointer; }
.err-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.err-actions .btn { min-height: 44px; display: inline-flex; align-items: center; }

/* Phase 82 — SEO 增强：实体简介 / FAQ 折叠 / 关联徽章 */
.seo-intro { max-width: var(--maxw); margin: 14px auto 4px; padding: 0 4px; color: var(--text-dim); font-size: 14px; line-height: 1.85; }
.faq-section { margin-top: 8px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 12px 16px; }
.faq-item > summary { cursor: pointer; font-weight: 700; color: var(--text); list-style: none; font-size: 15px; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before { content: 'Q. '; color: var(--accent); font-weight: 800; }
.faq-item[open] > summary { margin-bottom: 8px; }
.faq-item .faq-a { color: var(--text-dim); font-size: 14px; line-height: 1.8; }
.faq-item .faq-a::before { content: 'A. '; color: var(--accent); font-weight: 800; }
.seo-rel-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.seo-rel-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-dim); font-size: 13px; text-decoration: none; transition: .15s; }
.seo-rel-badge:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }

/* Phase 86 — サンプル動画 DVD 封面播放模式：竖版 DVD ジャケット(2:3)在 16:9 容器内完整呈现(contain)，黑底居中 */
.wd-video.wd-video-dvd { background-size: contain; background-position: center; background-color: #05050a; }
video.wd-video-player.wd-video-dvd { object-fit: contain; background: #05050a; }
/* 样图廊首图(DVD 封面)在网格中完整显示而非裁切 */
.wd-samples .sample-item:first-child img { object-fit: contain; background: #05050a; }

/* ===== Phase 87 — 卡片封面 background-image → <img>（lazy 加载，视觉零变化） =====
   object-fit:cover 等价原 background:cover；占位底色已在 thumb/容器；cover-pos-* img 焦点见上方规则。
   .card-media/.lcard-media 仍保留原类名 → 既有 hover transform/transition 规则自动复用。 */
img.card-media, img.lcard-media { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.t10-poster { position: relative; overflow: hidden; }
.t10-poster .t10-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.rt3-media .rt3-img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.district-card > .dc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; display: block; }
.district-card::after { z-index: 1; } /* 渐变盖在 dc-bg 之上、文字(z-index:2)之下 */

/* Phase 87 — 排行榜封面/头像 background-image → <img> */
.rkc-hero-media .rkc-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.rkc-hero.is-av .rkc-hero-media .rkc-hero-img { object-position: center 22%; }
.rkc-row-media { overflow: hidden; }
.rkc-row-media .rkc-row-img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.rkc-row-media.is-av .rkc-row-img { object-position: center 22%; }

/* ===== Phase 88 — トレンド TOP4+ 统一海报网格（Netflix Top10 / Amazon Prime 风，移动优先） =====
   与 TOP1-3(rt3) 同一视觉体系：DVD 封面(cover_image) + 渐变 + 排名数字 + TOP 标签 + 标题 + 女优。
   竖版 2:3 海报；焦点裁切复用 .cover-pos-* img（Phase 87）。 */
.rank-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
@media (min-width: 640px) { .rank-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .rank-grid { grid-template-columns: repeat(4, 1fr); } }
.rcard { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 16px; overflow: hidden; background: #14141d; border: 1px solid var(--glass-border); box-shadow: var(--shadow); color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.rcard:hover { transform: translateY(-4px); box-shadow: var(--shadow), var(--glow); border-color: var(--glow-border); }
.rcard-media { position: absolute; inset: 0; }
.rcard-img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.rcard:hover .rcard-img { transform: scale(1.05); }
.rcard-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-dim); font-size: 12px; }
.rcard-grad { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,5,9,.94) 8%, rgba(5,5,9,.35) 46%, rgba(5,5,9,.04) 100%); }
.rcard-num { position: absolute; z-index: 2; top: -4px; left: 8px; font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -3px; font-variant-numeric: tabular-nums; background: linear-gradient(160deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 14px rgba(255,43,122,.55)); pointer-events: none; }
.rcard-badges { position: absolute; z-index: 3; top: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rcard-info { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; }
.rcard-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 800; line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.rcard-actress { display: block; margin-top: 3px; font-size: 11.5px; color: #ff8db5; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard-metric { display: block; margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.72); }
.rcard-metric b { color: var(--accent); }

/* ===== Phase 89 — 搜索空查询发现页：全宽独立卡片堆叠（移动优先 / 无重叠 / 无横向溢出） =====
   沿用东京夜生活配色（--glass/--accent/--accent-2/--glow 等）。每块为独立卡片，flex 纵向堆叠。 */
.srch-discover { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 100%; margin-top: 6px; }
.disc-card { width: 100%; max-width: 100%; min-width: 0; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.disc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.disc-head h2 { font-size: 16px; font-weight: 800; margin: 0; position: relative; padding-left: 12px; }
.disc-head h2::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.disc-tag { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--glow-border); padding: 2px 10px; border-radius: 999px; }
/* 热门搜索 TOP10 编号榜：移动 1 列，≥560px 2 列 */
.disc-rank { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px; }
@media (min-width: 560px) { .disc-rank { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
.disc-rank li a { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-radius: 10px; }
.disc-rank li a:hover { background: var(--accent-soft); }
.disc-rank-n { flex: 0 0 auto; width: 24px; text-align: center; font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.disc-rank-n.is-top { color: var(--accent); }
.disc-rank-t { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-rank li .sbadge { flex: 0 0 auto; }
/* 女優 Carousel：横向滚动只发生在卡片内（actress-rail 已 overflow-x:auto），不撑破页面 */
.disc-rail { margin: 0; width: 100%; max-width: 100%; }

/* ===== Phase 90 — 影片详情推荐区裁切统一 =====
   推荐区(同シリーズ/同じ女優/人気おすすめ)所有卡片封面右侧主视觉优先（横版 DVD pl.jpg 主体在右）。
   作用域 .wd-recs，specificity 高于 .cover-pos-* img，无需 !important，不影响其它页面卡片。 */
.wd-recs .card-media { object-fit: cover; object-position: right center; }

/* ===== Phase 95 — Mobile UI Polish ===== */
/* ① 顶部品牌不换行（窄屏「JAV.CC」原折成两行，挤压 header） */
.brand { white-space: nowrap; flex: 0 0 auto; }
/* ⑦ iPhone Safari：动态视口高度（100vh 含地址栏会溢出/跳动；dvh 更准，保留上方 100vh 作旧浏览器回退） */
body { min-height: 100dvh; }
/* ⑥ 横向滚动体验：iOS 惯性滚动 + 防横滑触发浏览器「后退」手势（iPhone Safari / Android Chrome） */
.row, .row-land { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.actress-rail, .top10-rail, .disc-rail, .wd-samples, .wd2-cast { overscroll-behavior-x: contain; }
/* 窄屏 header 单行：缩小品牌字号与搜索框，避免与导航/语言争行 */
@media (max-width: 480px) {
    .brand { font-size: 16px; }
    .search-box input { width: 92px; }
}

/* ===== Phase 96 — Netflix Conversion UI ===== */
/* #8 购买按钮视觉强化：FANZA 主 CTA 呼吸光晕（hero / 吸底 / PC 面板的 .btn-cta-lg），引导点击；hover 暂停 + 提亮 */
@keyframes cta-glow {
    0%, 100% { box-shadow: 0 8px 22px rgba(255,46,126,.40); }
    50%      { box-shadow: 0 10px 30px rgba(255,46,126,.70), 0 0 0 3px rgba(255,46,126,.16); }
}
.wdx-hero-actions .btn-cta-lg,
.sticky-cta .btn-cta-lg,
.wdx-buy .btn-cta-lg,
.colx-hero-actions .btn-cta-lg { animation: cta-glow 2.2s ease-in-out infinite; will-change: box-shadow; }
.wdx-hero-actions .btn-cta-lg:hover,
.sticky-cta .btn-cta-lg:hover,
.wdx-buy .btn-cta-lg:hover,
.colx-hero-actions .btn-cta-lg:hover { animation: none; filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) { .btn-cta-lg { animation: none !important; } }

/* #10 点击率：卡片 hover 播放叠层（Netflix 桌面 hover；@media hover 仅触屏外设备，移动端无影响） */
@media (hover: hover) and (pointer: fine) {
    .card-thumb::after, .lcard-thumb::after {
        content: "▶"; position: absolute; top: 50%; left: 50%;
        transform: translate(-50%,-50%) scale(.78); z-index: 3;
        width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
        background: rgba(255,43,122,.92); color: #fff; font-size: 15px;
        box-shadow: 0 10px 28px rgba(255,43,122,.5);
        opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
    }
    .card:hover .card-thumb::after, .lcard:hover .lcard-thumb::after {
        opacity: 1; transform: translate(-50%,-50%) scale(1);
    }
}

/* ===== Phase Branding V1 — Footer / 内容页 / 目录页 / 社区页 ===== */
.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;  /* RC2：移除 Community 列 → 4 列 */
    gap: 32px;
    padding: 44px 0 8px;
}
.footer-brand .footer-logo {
    font-size: 24px; font-weight: 800; letter-spacing: .5px; color: var(--text);
    display: inline-block;
}
.footer-brand .footer-tagline { color: var(--text-dim); font-size: 13px; margin: 10px 0 16px; }
.site-footer .social { display: flex; gap: 14px; flex-wrap: wrap; }
.site-footer .social a { color: var(--text-dim); font-size: 13px; }
.site-footer .social a:hover { color: var(--accent); }
.footer-col h3 {
    font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
    color: var(--text-dim); margin: 0 0 14px; font-weight: 700;
}
.footer-col a {
    display: block; color: var(--text); opacity: .82; font-size: 14px;
    padding: 5px 0; transition: color .15s, opacity .15s;
}
.footer-col a:hover { opacity: 1; color: var(--accent); }
.footer-note { color: var(--text-dim); font-size: 12px; padding: 10px 0; }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 18px 0 28px; margin-top: 18px;
    border-top: 1px solid var(--glass-border); color: var(--text-dim); font-size: 12px;
}
.footer-bottom .footer-rights { opacity: .7; }
@media (max-width: 1024px) {
    .site-footer .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 26px 18px; padding-top: 36px; }
    .footer-brand { grid-column: 1 / -1; }
    .site-footer { padding-bottom: calc(var(--botnav-h) + 16px); }
}
@media (max-width: 560px) {
    .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* 内容页（About / Contact / Privacy / Terms / DMCA / 18+） */
.doc-page { max-width: 820px; margin: 0 auto; padding: 8px 0 40px; }
.doc-crumbs { display: flex; gap: 8px; font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }
.doc-crumbs a { color: var(--text-dim); }
.doc-crumbs a:hover { color: var(--accent); }
.doc-title { font-size: 28px; font-weight: 800; margin: 0 0 6px; }
.doc-updated { font-size: 12px; color: var(--text-dim); margin: 0 0 18px; }
.doc-lead { font-size: 16px; line-height: 1.75; color: var(--text); opacity: .9; margin: 0 0 30px; }
.doc-section { margin: 0 0 26px; }
.doc-section h2 { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.doc-section p, .doc-section li { line-height: 1.78; color: var(--text); opacity: .85; font-size: 14.5px; }
.doc-section ul, .doc-section ol { padding-left: 20px; margin: 8px 0; }
.doc-section li { margin: 6px 0; }
.doc-section a { color: var(--accent); }
.doc-section a:hover { text-decoration: underline; }

/* 目录页（Series / Studios） + 社区页（Bookmarks / History） */
.brand-index { padding: 8px 0 32px; }
.cat-index .cat-sub { margin: 2px 0 0; font-size: 13px; }
.cat-search { max-width: 560px; margin: 16px 0 10px; }
.brand-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bc-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
    border: 1px solid var(--glass-border); border-radius: 999px;
    background: rgba(255,255,255,.03); font-size: 14px; color: var(--text);
    transition: border-color .15s, color .15s;
}
.bc-chip:hover { border-color: var(--accent); color: var(--accent); }
.bc-chip .bc-count { font-size: 12px; color: var(--text-dim); }
.brand-empty { text-align: center; padding: 64px 20px; }
.brand-empty-icon { font-size: 46px; margin: 0 0 6px; opacity: .45; }
.brand-empty h2 { font-size: 20px; margin: 0 0 8px; }
.brand-cta {
    display: inline-block; margin-top: 18px; padding: 11px 22px; border-radius: 11px;
    font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.brand-cta:hover { filter: brightness(1.06); }
.brand-cta-ghost { background: transparent; border: 1px solid var(--glass-border); color: var(--text); margin-bottom: 8px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-top: 18px; }
.bc-saved { display: block; }
.bc-saved img { width: 100%; border-radius: 8px; aspect-ratio: 3/4; object-fit: cover; object-position: right center; }
.bc-noimg { display: block; aspect-ratio: 3/4; background: rgba(255,255,255,.05); border-radius: 8px; }
.bc-saved-t { display: block; font-size: 12px; margin-top: 6px; color: var(--text-dim); }

/* ===== Phase Brand-01 — 首页品牌区 ===== */
.brand-zone {
    margin: 40px 0 8px;
    padding-top: 36px;
    border-top: 1px solid var(--glass-border);
}
.brand-hero { text-align: center; padding: 8px 16px 26px; }
.brand-hero-mark {
    font-size: clamp(34px, 7vw, 56px); font-weight: 900; letter-spacing: 1px; line-height: 1.02;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 8px 40px rgba(255,43,122,.25);
}
.brand-hero-sub { margin: 8px 0 0; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--text-dim); }
.brand-hero-tag { margin: 14px 0 0; font-size: clamp(16px, 2.6vw, 20px); font-weight: 700; color: var(--text); }
.brand-hero-desc { margin: 6px 0 0; font-size: 13px; color: var(--text-dim); }

.brand-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;  /* RC2：紧凑单行 */
    margin: 6px auto 30px; max-width: 760px;
}
.bstat {
    text-align: center; padding: 11px 6px; border-radius: var(--radius-sm);  /* RC2：单行压缩 */
    background: var(--glass); border: 1px solid var(--glass-border);
    transition: transform .15s ease, border-color .15s ease;
}
.bstat:hover { transform: translateY(-3px); border-color: var(--glow-border); }
.bstat-num {
    display: block; font-size: clamp(17px, 3.4vw, 26px); font-weight: 900; line-height: 1;  /* RC2 */
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bstat-label { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }

.brand-sec { margin: 22px 0; }
.brand-studios { display: flex; flex-wrap: wrap; gap: 10px; }
.studio-chip {
    display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px;
    border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--glass-border);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.studio-chip:hover { transform: translateY(-2px); border-color: var(--glow-border); box-shadow: var(--glow); }
.studio-chip .studio-name { font-weight: 800; font-size: 14px; letter-spacing: .02em; color: var(--text); }
.studio-chip .studio-count { font-size: 12px; color: var(--accent); font-weight: 700; }

.brand-actresses {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr);
    gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin;
}
@media (min-width: 760px) {
    .brand-actresses { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; }
}
.brand-actress { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.brand-actress .av-lg { width: 96px; height: 96px; box-shadow: 0 0 0 2px var(--glass-border), 0 8px 22px rgba(0,0,0,.45); transition: box-shadow .15s ease, transform .15s ease; }
.brand-actress:hover .av-lg { box-shadow: 0 0 0 2px var(--accent), 0 10px 26px rgba(255,43,122,.4); transform: translateY(-3px); }
.ba-name { font-size: 13px; font-weight: 700; color: var(--text); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-count { font-size: 11px; color: var(--text-dim); }
.ba-count .ba-count-l { opacity: .7; }

/* ===== Phase Brand-01 — Footer 品牌强化 ===== */
.site-footer .footer-logo {
    font-size: 26px; font-weight: 900; letter-spacing: .5px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.footer-brand .footer-archive {
    margin: 8px 0 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim);
}
.footer-brand .footer-tagline { margin: 6px 0 0; }
.footer-brand .footer-blurb {
    margin: 12px 0 16px; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); max-width: 340px;
}
.footer-bottom-brand { display: inline-flex; align-items: center; gap: 12px; }
.footer-18 {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 22px; padding: 0 7px; border-radius: 6px;
    font-size: 11px; font-weight: 900; letter-spacing: .04em; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.site-footer .footer-rights { opacity: .7; max-width: 420px; text-align: right; }
@media (max-width: 560px) {
    .site-footer .footer-rights { text-align: left; }
}

/* ===== Phase Brand-02 — 首页品牌区横向卡片 rail ===== */
.brand-rail {
    display: flex; gap: 12px; overflow-x: auto;
    padding: 2px 2px 12px; margin-top: 4px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.brand-rail::-webkit-scrollbar { height: 6px; }
.brand-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }
.studio-card, .series-card {
    flex: 0 0 auto; scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
    min-height: 84px; padding: 16px 18px; border-radius: 14px;
    background: var(--bg-elev); border: 1px solid var(--glass-border);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.studio-card { width: 168px; }
.series-card { width: 212px; }
.studio-card:hover, .series-card:hover { transform: translateY(-3px); border-color: var(--glow-border); box-shadow: var(--glow); }
.studio-card-name { font-weight: 800; font-size: 15px; color: var(--text); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.series-card-name {
    font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.studio-card-count, .series-card-count { font-size: 12px; color: var(--accent); font-weight: 700; }
.sc-l { color: var(--text-dim); font-weight: 500; }
/* Homepage RC2：系列卡封面缩略图 */
.series-card { justify-content: flex-start; }
.series-card-thumb { display: block; width: 100%; height: 104px; border-radius: 10px; background: #16161f center/cover no-repeat; box-shadow: inset 0 0 0 1px var(--glass-border); margin-bottom: 2px; }

.brand-rail-av { gap: 16px; }
.brand-rail-av .brand-actress {
    flex: 0 0 auto; scroll-snap-align: start; width: 100px;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
}
.brand-rail-av .av-lg { width: 92px; height: 92px; }
.brand-rail-av .ba-name { max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 700; }
.brand-rail-av .ba-count { font-size: 11px; color: var(--text-dim); }

/* ===== Review-01 — 真实评分（详情页交互星级） ===== */
.wd-rate { align-items: center; }
.wd-rate-stars { display: inline-flex; gap: 2px; line-height: 1; margin-bottom: 4px; }
.wd-rate-star {
    background: none; border: 0; padding: 0 1px; cursor: pointer; font-size: 20px; line-height: 1;
    color: rgba(255,255,255,.22); transition: color .12s ease, transform .08s ease;
}
.wd-rate-star:hover { transform: scale(1.12); }
.wd-rate-star.on { color: var(--accent-2); }            /* 平均分填充（琥珀） */
.wd-rate-star.mine { color: var(--accent); }            /* 本人评分高亮（霓虹粉） */
.wd-rate-stars.is-hovering .wd-rate-star.on { color: rgba(255,255,255,.22); }
.wd-rate-star.hover { color: var(--accent-2); }
.wd-rate .wd-rate-avg { font-weight: 800; }
.wd-rate-hint { font-size: 11px; color: var(--accent); margin-left: 6px; font-weight: 700; }

/* ===== Review-02 — 评论区 V1 ===== */
.wd2-comments .cmt-flash { padding: 10px 14px; border-radius: 10px; font-size: 13px; margin: 0 0 12px; }
.cmt-flash-ok { background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.4); color: #c8f5d6; }
.cmt-flash-err { background: rgba(220,38,38,.14); border: 1px solid rgba(220,38,38,.4); color: #ffd7d7; }
.cmt-form { padding: 14px; border-radius: 14px; margin: 0 0 18px; display: block; }
.cmt-form-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.cmt-input { flex: 1 1 200px; min-width: 160px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid var(--glass-border); color: var(--text); font-size: 14px; }
.cmt-textarea { width: 100%; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid var(--glass-border); color: var(--text); font-size: 14px; resize: vertical; }
.cmt-input:focus, .cmt-textarea:focus { outline: none; border-color: var(--accent); }
.cmt-rate { display: inline-flex; flex-direction: row-reverse; }
.cmt-rate input { position: absolute; opacity: 0; width: 0; height: 0; }
.cmt-rate label { font-size: 24px; line-height: 1; padding: 0 1px; color: rgba(255,255,255,.22); cursor: pointer; transition: color .12s ease; }
.cmt-rate label:hover, .cmt-rate label:hover ~ label, .cmt-rate input:checked ~ label { color: var(--accent-2); }
.cmt-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.cmt-note { font-size: 11px; color: var(--text-dim); }
.cmt-empty { padding: 18px 0; }
.cmt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cmt-item { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--glass-border); }
.cmt-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cmt-nick { font-weight: 700; font-size: 14px; color: var(--text); }
.cmt-stars .star { color: rgba(255,255,255,.22); font-size: 13px; }
.cmt-stars .star.on { color: var(--accent-2); }
.cmt-date { font-size: 11px; color: var(--text-dim); margin-left: auto; }
.cmt-body { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text); opacity: .9; word-break: break-word; overflow-wrap: anywhere; }