/* myfavporn Mini App v0.5 — actor-centric SPA.
 *
 * 配色对齐 FROZEN 演员页: 黑底 + 暗红 + 金 (跟 libcore/static/actor.css 一脉).
 * 字体: Cormorant Garamond (h1/标题/演员名) + Inter (正文 / chrome).
 * 不引入框架, 不 bundle, vanilla CSS3 + grid + flexbox.
 *
 * Telegram WebApp themeParams 仍同步, 但 fallback 锁死自家配色 — 避免被
 * 用户客户端的浅色主题搞乱视觉.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
    /* 内置 palette — 不让 Telegram theme 覆盖关键品牌色 */
    --bg:          #0f0f0f;
    --bg-soft:     #1a1a1a;
    --bg-card:     #181818;
    --text:        #ebe6dd;
    --text-soft:   #a8a39a;
    --text-dim:    #6c6760;
    --red:         #b91c3c;
    --red-soft:    #e63d6a;
    --gold:        #c9a25a;
    --gold-soft:   #ead495;
    --line:        #2a2a2a;

    --serif: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
    --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.45;
    min-height: 100vh;
    -webkit-touch-callout: none;
    overscroll-behavior: contain;
}

a { color: var(--red-soft); text-decoration: none; }
button { font: inherit; }
img { display: block; }

/* ---------------- topbar / loading / error / reject ---------------- */
.topbar {
    background: #050505;
    color: var(--text);
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.topbar.error { color: #ff7a8a; }
.topbar.warn  { color: var(--gold); }

.loading-view { padding: 64px 24px; text-align: center; color: var(--text-soft); font-size: 14px; }
.error-view, .reject-view {
    padding: 64px 24px;
    text-align: center;
}
.error-view h1, .reject-view h1 {
    font-family: var(--serif);
    color: var(--red-soft);
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 500;
}
.error-view p, .reject-view p { color: var(--text-soft); margin-bottom: 16px; }
.reject-view code, .error-view code {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-soft);
    border-radius: 6px;
    color: var(--gold);
    font-family: ui-monospace, SF Mono, Menlo, monospace;
    font-size: 12px;
    margin-bottom: 16px;
}

/* ---------------- shared button ---------------- */
.btn {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font: 500 14px var(--sans);
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}
.btn:hover:not(:disabled) { background: var(--red-soft); }
.btn:active   { opacity: 0.7; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* ---------------- two-level tabbar ---------------- */
/* L0: Western / JAV — 永远 sticky 顶部 */
.tabbar-l0 {
    display: flex;
    background: #050505;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}
.tabbar-l0 .tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-dim);
    padding: 14px 8px;
    font: 500 16px var(--serif);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    letter-spacing: 0.05em;
}
.tabbar-l0 .tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* L1: Actors / Scenes — sticky 在 L0 下方 */
.tabbar-l1 {
    display: flex;
    background: #0a0a0a;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 48px;
    z-index: 19;
}
.tabbar-l1 .tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-soft);
    padding: 12px 8px;
    font: 500 13px var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.tabbar-l1 .tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold-soft);
}

/* ---------------- sliders (watch/download + all/solo/favorite) ---------------- */
.sliders {
    background: var(--bg-soft);
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    position: sticky;
    top: 92px;
    z-index: 18;
    border-bottom: 1px solid var(--line);
}
.slider {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg);
}
.slider button {
    background: none;
    border: none;
    color: var(--text-soft);
    padding: 6px 14px;
    font: 500 12px var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.slider button.active {
    background: var(--red);
    color: #fff;
}
.slider button:active { opacity: 0.7; }
.slider button:hover:not(.active) { color: var(--text); }

/* ---------------- actor grid (L2-A, portrait 2-col mobile / multi 桌面) ---------------- */
.actor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 6px;
}
.actor-card {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--bg-card);
    cursor: pointer;
    border-radius: 4px;
}
.actor-card .portrait {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.actor-card:hover .portrait { transform: scale(1.04); }
.actor-card .portrait-fallback {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #1a1a1a 25%, #0f0f0f 75%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 11px;
    text-align: center;
    padding: 12px;
}
/* v0.6 (PR5): name + rank-badge 跟网页 home.css .wall-name / .wall-rank 字体风格对齐 —
 * Cormorant Garamond italic, name 用 --gold (而非 --gold-soft), rank 用 crimson 底 +
 * gold-soft 文字 + italic serif. mini app 保留 overlay+gradient 形态 (小屏空间限制),
 * 仅同步字体. JAV 双行 sub 仍走 Inter sans, 跟网页 .wall-name-en 一致 (italic).
 */
.actor-card .name {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 24px 10px 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.92));
    color: var(--gold);
    font: italic 500 17px var(--serif);
    line-height: 1.2;
    letter-spacing: 0.01em;
    pointer-events: none;
    word-break: break-word;
}
.actor-card .name .sub {
    display: block;
    color: var(--text-soft);
    font: italic 400 12px var(--sans);
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.actor-card .rank-badge {
    position: absolute;
    top: 6px; left: 6px;
    background: var(--red);
    color: var(--gold-soft);
    padding: 2px 9px;
    border-radius: 2px;
    font: italic 500 14px var(--serif);
    letter-spacing: 0.04em;
    pointer-events: none;
    z-index: 1;
}

/* ---------------- scene grid (L2-B / actor-scenes, 横版 1-col) ---------------- */
.scene-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 12px;
}
.scene-card {
    background: var(--bg-card);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s;
}
.scene-card:hover { transform: translateY(-2px); }
.scene-card .poster-wrap {
    /* v0.5.5: scene poster 预设 16:9 横版框 (background_url 来源固定 1500x843).
     * 缺 background_url 的 scene 直接走 placeholder 不下竖版. JAV 一侧另有
     * .scene-card.jav .poster-wrap 覆盖比例.
     */
    width: 100%;
    aspect-ratio: 16/9;
    background: #111;
    overflow: hidden;
    position: relative;
}
.scene-card .poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* JAV scene poster: v0.6 起向 AV (Western) 看齐 — 跟 .scene-card .poster
 * 同走 16:9 + object-fit:cover. 之前 1:1 + contain 留白太多, 且 contain 模式
 * 下徽章会浮在 letterbox 留白区不在图像内. cover 模式让图填满 poster-wrap,
 * 徽章 (.badges, top:6 right:6) 自然落在图像右上角. */

.scene-card .poster-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #181818 25%, #0f0f0f 75%);
    color: var(--text-dim);
    font-family: var(--serif);
    font-size: 28px;
}
/* v0.6 watch-download: 徽章横向并排 (▶ 在 🧲 左边), 走 .badges flex 容器 row 排.
 * ▶ + 🧲 都用网页版 .scene-magnet-badge 同款黑底金边圆角外框 (actor.css:245);
 * 115 仍保留暗红底文字徽章, 跟 ed2k 类型语义区分. */
.scene-card .badges {
    position: absolute;
    top: 6px; right: 6px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    pointer-events: none;
}
.scene-card .badge {
    background: var(--gold);
    color: #000;
    padding: 2px 6px;
    border-radius: 3px;
    font: 600 10px var(--sans);
    letter-spacing: 0.05em;
}
/* ▶ 跟 🧲 公用网页版徽章外框 (黑底 + 金边 + 圆角 12 + Inter 11px gold-soft). */
.scene-card .badge.play,
.scene-card .badge.mag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    background: rgba(13, 7, 9, 0.78);
    border: 1px solid var(--gold);
    color: var(--gold-soft);
    font: 600 11px/1.2 var(--sans);
    letter-spacing: 0.04em;
    backdrop-filter: blur(3px);
}
.scene-card .badge.play .m-icon,
.scene-card .badge.mag .m-icon { font-size: 12px; line-height: 1; }
.scene-card .badge.mag .m-n { font: inherit; }
.scene-card .badge.ed2k { background: var(--red-soft); color: #fff; }
.scene-card .info {
    padding: 8px 10px 12px;
}
.scene-card .title {
    font: 500 14px var(--serif);
    color: var(--text);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.6em;
}
.scene-card .subtitle {
    margin-top: 4px;
    font: 400 11px var(--sans);
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------- L1 list footer / load more / empty ---------------- */
.list-footer { padding: 14px; text-align: center; }
.list-meta { color: var(--text-dim); font-size: 11px; margin-bottom: 10px; letter-spacing: 0.06em; }
.empty-state {
    padding: 64px 24px;
    text-align: center;
    color: var(--text-soft);
}
.empty-state .empty-icon {
    font-family: var(--serif);
    font-size: 32px;
    color: var(--gold);
    margin-bottom: 8px;
}

/* ---------------- actor detail (L3-A) ---------------- */
.actor-detail { padding: 0 0 80px 0; }
/* v0.6 (PR3): banner = 前 2 张 portrait 并排 (跟网页端横滑 strip 同形态, 但 2 slot). */
.actor-detail .banner {
    width: 100%;
    height: 280px;
    background: var(--bg-card);
    position: relative;
    display: flex;
    gap: 2px;
}
.actor-detail .banner-slot {
    flex: 1 1 0;
    height: 100%;
    background-color: var(--bg-card);
    background-position: center 30%;
    background-repeat: no-repeat;
    background-size: cover;
}
.actor-detail .banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85));
    pointer-events: none;
}
.actor-detail .hero {
    padding: 14px 16px 4px;
    background: var(--bg);
    margin-top: -40px;
    position: relative;
}
.actor-detail h1 {
    font: 500 28px var(--serif);
    color: var(--gold-soft);
    letter-spacing: 0.01em;
    line-height: 1.1;
}
.actor-detail .name-sub {
    font: italic 400 14px var(--serif);
    color: var(--text-soft);
    margin-top: 2px;
}
.actor-detail .data-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 12px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    font: 400 12px var(--sans);
    color: var(--text-soft);
}
.actor-detail .data-bar .cell {
    display: flex;
    flex-direction: column;
}
.actor-detail .data-bar .cell-label {
    color: var(--text-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.actor-detail .data-bar .cell-value { color: var(--text); font-size: 13px; }

/* ---------------- scene detail (L3-B) ---------------- */
.scene-detail { padding: 0 0 80px 0; }
.scene-detail .hero {
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 420px;
    overflow: hidden;
    background: #000;
}
.scene-detail .hero img { width: 100%; height: 100%; object-fit: cover; }
.scene-detail .header {
    padding: 14px 16px 4px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.scene-detail h1 {
    font: 500 22px var(--serif);
    color: var(--gold-soft);
    line-height: 1.2;
    flex: 1;
}
.scene-detail .heart-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.scene-detail .heart-btn.on { color: var(--red-soft); }
.scene-detail .heart-btn:active { transform: scale(0.92); }
.scene-detail .meta-line {
    color: var(--text-soft);
    font: 400 13px var(--sans);
    padding: 0 16px 12px;
}
.scene-detail .chip-row {
    padding: 8px 16px;
}
.scene-detail .chip-row-label {
    font: 500 10px var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold);
    margin-bottom: 6px;
}
.scene-detail .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.scene-detail .chip {
    background: var(--bg-soft);
    color: var(--text);
    padding: 5px 12px;
    border-radius: 12px;
    font: 400 12px var(--sans);
    white-space: nowrap;
    cursor: pointer;
}
.scene-detail .chip.subtle {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-soft);
    cursor: default;
}
.scene-detail .chip.actor:hover { background: var(--red); color: #fff; }
.scene-detail .description {
    padding: 14px 16px;
    font: 400 14px var(--sans);
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
}
/* ---------------- v0.6 watch-download: scene detail mode slider ---------------- */
/* slider 视觉走全局 .sliders/.slider 已有规则; scene-detail 里加 margin/padding 收边. */
.scene-detail .sliders {
    padding: 14px 16px 4px;
    margin-top: 6px;
}

/* ---------------- v0.6 download modal (移植网页版 jav-magnet-modal) ---------------- */
.dl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overscroll-behavior: contain;
    animation: dl-fade-in .14s ease-out;
}
@keyframes dl-fade-in { from { opacity: 0; } to { opacity: 1; } }
.dl-modal {
    position: relative;
    background: #1c0e12;
    border: 1px solid var(--gold);
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.8);
    max-width: 560px;
    width: 100%;
    max-height: 84vh;
    overflow-y: auto;
    padding: 22px 22px 18px;
}
.dl-modal h3 {
    font: italic 500 18px var(--serif);
    color: var(--gold-soft);
    margin: 0 0 12px;
    padding-right: 28px;
    line-height: 1.3;
}
.dl-close {
    position: absolute;
    top: 12px; right: 14px;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.dl-close:hover { color: var(--gold-soft); }
.dl-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dl-item {
    border: 1px solid var(--line);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 2px;
}
.dl-item.is-ed2k {
    border: 1px solid var(--gold);
    background: linear-gradient(0deg, rgba(201,162,90,0.05), rgba(201,162,90,0.10));
}
.dl-item .dl-name {
    font: 400 12px ui-monospace, SF Mono, Menlo, monospace;
    color: var(--text);
    word-break: break-all;
    line-height: 1.4;
}
.dl-item.is-ed2k .dl-name { color: var(--gold-soft); }
.dl-115 {
    display: inline-block;
    background: var(--gold-soft);
    color: #0d0709;
    padding: 1px 6px;
    border-radius: 8px;
    font: 700 10px var(--sans);
    letter-spacing: 0.04em;
    margin-right: 4px;
    vertical-align: 1px;
}
.dl-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font: 400 11px var(--sans);
    color: var(--text-dim);
}
.dl-tag {
    background: var(--gold);
    color: #0d0709;
    padding: 1px 7px;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.dl-tag-115 { background: var(--gold-soft); }
.dl-copy {
    align-self: flex-start;
    background: none;
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 3px 12px;
    cursor: pointer;
    font: 500 11px var(--sans);
    letter-spacing: 0.04em;
    border-radius: 2px;
    transition: background .12s, color .12s;
}
.dl-copy:hover { background: var(--gold); color: #0d0709; }
.dl-copy.copied { background: #2a7; color: #fff; border-color: #2a7; }
.dl-copy.fail   { background: #c33; color: #fff; border-color: #c33; }

/* ---------------- settings ---------------- */
.settings-view { padding: 16px; max-width: 600px; margin: 0 auto; }
.settings-view h1 {
    font: 500 24px var(--serif);
    color: var(--gold);
    margin-bottom: 16px;
}
.settings-view .row {
    background: var(--bg-soft);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.settings-view .row .label { color: var(--text); font: 400 14px var(--sans); }
.settings-view .row .value {
    color: var(--text-soft);
    font: 400 13px ui-monospace, SF Mono, Menlo, monospace;
}

/* ---------------- responsive: 桌面 / iPad ---------------- */

@media (min-width: 600px) {
    .actor-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 900px;
        margin: 0 auto;
    }
    .scene-grid {
        max-width: 900px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .actor-detail, .scene-detail {
        max-width: 800px;
        margin: 0 auto;
    }
    .actor-detail .banner { height: 360px; }
}

@media (min-width: 900px) {
    .actor-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1200px;
    }
    .scene-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px;
    }
    .actor-detail, .scene-detail { max-width: 1000px; }
}

@media (hover: hover) {
    .tabbar-l0 .tab:not(.active):hover {
        color: var(--text);
    }
    .tabbar-l1 .tab:not(.active):hover {
        color: var(--text);
    }
}

button {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ---------------- v0.6 PR2: paywall ---------------- */
.paywall-view {
    min-height: calc(100vh - 1px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}
.paywall-card {
    width: 100%;
    max-width: 420px;
    background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 40px 28px 28px;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.paywall-brand {
    font-family: var(--serif);
    font-size: 18px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}
.paywall-card h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 40px;
    color: var(--text);
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}
.paywall-tagline {
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 32px;
}
.paywall-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 28px;
    color: var(--gold-soft);
}
.paywall-price-num {
    font-family: var(--serif);
    font-size: 56px;
    font-weight: 500;
    line-height: 1;
}
.paywall-price-unit {
    font-size: 28px;
    line-height: 1;
}
.paywall-price-period {
    color: var(--text-soft);
    font-size: 14px;
    margin-left: 4px;
}
.paywall-pay-btn {
    width: 100%;
    background: linear-gradient(180deg, var(--red-soft) 0%, var(--red) 100%);
    color: #fff;
    font: 600 16px var(--sans);
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(185, 28, 60, 0.32);
}
.paywall-pay-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--red-soft) 0%, var(--red-soft) 100%);
}
.paywall-fineprint {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.5;
}