:root {
    --rf-bg: #0f1115;
    --rf-panel: #171a21;
    --rf-line: #2a303b;
    --rf-text: #e8edf5;
    --rf-sub: #9aa5b4;
    --rf-primary: #4f8cff;
}

* { box-sizing: border-box; }
body.rf-body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--rf-bg);
    color: var(--rf-text);
}

.rf-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.rf-main { min-height: 70vh; padding: 20px 0 40px; }

.rf-header { border-bottom: 1px solid var(--rf-line); background: rgba(15, 17, 21, .92); position: sticky; top: 0; z-index: 9; backdrop-filter: blur(8px); }
.rf-head-inner { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.rf-logo { color: var(--rf-text); text-decoration: none; font-weight: 700; font-size: 20px; white-space: nowrap; }
.rf-nav { display: flex; gap: 8px; flex: 1; overflow-x: auto; }
.rf-nav-link { color: var(--rf-sub); text-decoration: none; padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.rf-nav-link:hover { color: var(--rf-text); background: #1e2430; }
.rf-search input { background: var(--rf-panel); border: 1px solid var(--rf-line); color: var(--rf-text); border-radius: 8px; padding: 8px 10px; width: 220px; }

.rf-footer { border-top: 1px solid var(--rf-line); color: var(--rf-sub); font-size: 13px; padding: 22px 0; }

.rf-hero { margin-bottom: 20px; position: relative; }
.rf-hero-slider { position: relative; min-height: 360px; }
.rf-hero-link { display: block; border-radius: 12px; overflow: hidden; position: absolute; inset: 0; color: #fff; text-decoration: none; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.rf-hero-link.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.rf-hero-link img { width: 100%; height: 360px; object-fit: cover; display: block; }
.rf-hero-mask { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)); }
.rf-hero-mask h1 { margin: 0 0 6px; font-size: 24px; }
.rf-hero-mask p { margin: 0; color: #d5deeb; }
.rf-hero-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.rf-hero-dot { width: 8px; height: 8px; border-radius: 999px; border: 0; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; }
.rf-hero-dot.is-active { width: 20px; background: #fff; }

.rf-section { margin: 24px 0; }
.rf-sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rf-sec-head h1, .rf-sec-head h2 { margin: 0; font-size: 22px; }
.rf-sec-head a, .rf-sec-head span { color: var(--rf-sub); text-decoration: none; }

.rf-breadcrumb { display: flex; align-items: center; gap: 8px; margin: 8px 0 14px; font-size: 13px; color: var(--rf-sub); }
.rf-breadcrumb a { color: var(--rf-sub); text-decoration: none; }
.rf-breadcrumb a:hover { color: #c7d8f5; }
.rf-breadcrumb-current { color: #d7e5ff; }

.rf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.rf-card { display: block; background: var(--rf-panel); border: 1px solid var(--rf-line); border-radius: 10px; overflow: hidden; color: inherit; text-decoration: none; }
.rf-card img { width: 100%; height: 235px; object-fit: cover; display: block; }
.rf-card h3 { margin: 10px 10px 4px; font-size: 15px; line-height: 1.35; min-height: 40px; }
.rf-card p { margin: 0 10px 12px; color: var(--rf-sub); font-size: 13px; }

.rf-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; }
.rf-page-btn, .rf-page-num {
    text-decoration: none;
    color: var(--rf-text);
    border: 1px solid var(--rf-line);
    background: var(--rf-panel);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
}
.rf-page-btn:hover, .rf-page-num:hover { border-color: var(--rf-primary); color: #bcd5ff; }
.rf-page-nums { display: flex; align-items: center; gap: 8px; }
.rf-page-num.is-active { border-color: var(--rf-primary); color: #bcd5ff; background: #1b2638; }
.rf-page-dots { color: var(--rf-sub); font-size: 12px; }

.rf-detail { display: grid; grid-template-columns: 280px 1fr; gap: 18px; background: var(--rf-panel); border: 1px solid var(--rf-line); border-radius: 12px; padding: 14px; }
.rf-detail-left img { width: 100%; border-radius: 8px; display: block; }
.rf-detail-right h1 { margin: 0 0 10px; font-size: 28px; }
.rf-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rf-meta span { background: #202633; color: #c7d3e4; border: 1px solid #2e3646; font-size: 12px; padding: 4px 8px; border-radius: 20px; }
.rf-detail-right p { margin: 8px 0; color: #d5deeb; }
.rf-desc { color: #b8c4d6; line-height: 1.75; }
.rf-play-btn { display: inline-block; margin-top: 10px; background: var(--rf-primary); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; }

.rf-line h3 { margin: 0 0 10px; font-size: 16px; }
.rf-episodes { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-episodes a { color: var(--rf-text); text-decoration: none; border: 1px solid var(--rf-line); background: var(--rf-panel); padding: 7px 10px; border-radius: 8px; font-size: 13px; }
.rf-episodes a:hover, .rf-episodes a.is-active { border-color: var(--rf-primary); color: #bcd5ff; }
.rf-episodes a.is-hide { display: none; }

.rf-story-box { background: var(--rf-panel); border: 1px solid var(--rf-line); border-radius: 10px; padding: 14px; }
.rf-story-title { margin: 12px 0 6px; font-size: 15px; color: #dbe7ff; font-weight: 600; }
.rf-story-text { margin: 0 0 10px; color: #b8c4d6; line-height: 1.8; font-size: 14px; }

.rf-sources { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-source-btn { border: 1px solid var(--rf-line); background: var(--rf-panel); color: var(--rf-text); border-radius: 8px; padding: 7px 10px; font-size: 13px; cursor: pointer; }
.rf-source-btn.is-active, .rf-source-btn:hover { border-color: var(--rf-primary); color: #bcd5ff; }

.rf-player { width: 100%; }
.rf-player-container { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.rf-empty { padding: 30px; text-align: center; border: 1px dashed var(--rf-line); border-radius: 10px; color: var(--rf-sub); }

@media (max-width: 900px) {
    .rf-search input { width: 150px; }
    .rf-detail { grid-template-columns: 1fr; }
    .rf-player-container { min-height: 220px; }
    .rf-hero-link img { height: 220px; }
    .rf-pagination { flex-wrap: wrap; }
}