*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,sans-serif}
body{background:#0a0a0a;color:#fff;padding-bottom:80px}
.jf-app{max-width:500px;margin:0 auto;position:relative}

.jf-livebar{background:#e50914;padding:6px 12px;display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:50}
.jf-live-tag{background:rgba(0,0,0,.3);padding:2px 8px;border-radius:4px;font-size:10px;font-weight:bold;display:flex;align-items:center;gap:5px}
.jf-dot{width:6px;height:6px;background:#fff;border-radius:50%;animation:jfBlink 1s infinite}
.jf-marquee-wrap{flex:1;overflow:hidden}
.jf-marquee{white-space:nowrap;font-size:12px;font-weight:600;animation:jfMarquee 25s linear infinite}

.jf-hero{position:relative;height:60vh;min-height:380px;overflow:hidden}
.jf-hero img{width:100%;height:100%;object-fit:cover}
.jf-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,#0a0a0a,transparent)}
.jf-hero-header{position:absolute;top:12px;left:16px;right:16px}
.jf-logo{font-weight:800;font-size:18px}.jf-logo span,.red{color:#e50914}
.jf-hero-text{position:absolute;bottom:40px;left:16px;right:16px}
.jf-hero-text h1{font-size:32px;font-weight:800;line-height:1}
.jf-hero-text p{font-size:24px;font-weight:bold;margin-top:4px}
.jf-hero-btns{display:flex;gap:8px;margin-top:14px}
.jf-btn-play{background:#e50914;color:#fff;border:0;padding:10px 24px;border-radius:6px;font-weight:bold;cursor:pointer}
.jf-btn-list{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.2);padding:10px 24px;border-radius:6px;font-weight:bold;cursor:pointer}
.jf-hero-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.jf-hero-dots span{width:6px;height:4px;background:rgba(255,255,255,.4);border-radius:2px}
.jf-hero-dots span.on{width:24px;background:#e50914}

.jf-section{margin-top:24px}
.jf-section h2{font-size:16px;font-weight:800;padding:0 16px;margin-bottom:12px}
.jf-row{display:flex;gap:12px;overflow-x:auto;padding:0 16px 8px;scrollbar-width:none}
.jf-row::-webkit-scrollbar{display:none}

.jf-ott{flex-shrink:0;width:80px;height:80px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;border:2px solid #e50914;box-shadow:0 0 12px rgba(229,9,20,.4)}

.jf-poster{flex-shrink:0;width:120px;background:0;border:0;cursor:pointer;padding:0}
.jf-poster img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px}
.jf-poster-info{text-align:left;margin-top:4px;color:#fff;font-size:11px}
.jf-poster-info span{color:#e50914;font-size:9px;font-weight:600}

.jf-channel{flex-shrink:0;width:80px;background:0;border:0;cursor:pointer;color:#fff;display:flex;flex-direction:column;align-items:center;gap:6px}
.jf-channel img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid #1a2540}
.jf-channel span{font-size:10px;font-weight:600}

.jf-page-title{font-size:20px;font-weight:800;padding:16px}
.jf-cats{display:flex;gap:8px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none}
.jf-cats::-webkit-scrollbar{display:none}
.jf-cat{flex-shrink:0;padding:8px 20px;border-radius:999px;font-size:12px;font-weight:bold;background:0;color:#ccc;border:1px solid #1a1a1a;cursor:pointer}
.jf-cat.active{background:#e50914;color:#fff;border-color:#e50914}
.jf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 16px}
.jf-grid .jf-poster{width:100%}

.jf-live-player{background:#000;aspect-ratio:16/9;width:100%}
.jf-live-player iframe{width:100%;height:100%;border:0}
.jf-channel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:16px}
.jf-channel-grid .jf-channel{width:100%}
.jf-channel-grid .jf-channel img{width:100%;height:auto;aspect-ratio:1}

.jf-account{padding:24px;text-align:center}
.jf-account p{margin:8px 0}

.jf-bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:500px;height:70px;background:rgba(10,10,10,.95);backdrop-filter:blur(10px);border-top:1px solid #1a1a1a;display:flex;justify-content:space-around;align-items:center;z-index:100}
.jf-nav{flex:1;background:0;border:0;color:#666;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;cursor:pointer;padding:6px 0}
.jf-nav.active{color:#e50914}
.jf-nav span{font-size:10px;font-weight:600}
.jf-nav-center{width:64px;height:64px;border-radius:50%;background:#000;border:3px solid #e50914;color:#fff;font-size:28px;cursor:pointer;margin-top:-32px;box-shadow:0 0 20px rgba(229,9,20,.6);animation:jfPulse 2s infinite}

.jf-player{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:9999;display:flex;align-items:center;justify-content:center;padding:12px}
.jf-player-box{width:100%;max-width:1000px;background:#000;border-radius:12px;overflow:hidden;position:relative}
.jf-player-close{position:absolute;top:8px;right:8px;z-index:10;background:rgba(0,0,0,.7);color:#fff;width:36px;height:36px;border-radius:50%;border:0;font-size:24px;cursor:pointer}
.jf-player-box iframe{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
.jf-player-title{padding:14px 16px;font-weight:bold}

@keyframes jfBlink{50%{opacity:.3}}
@keyframes jfMarquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@keyframes jfPulse{0%,100%{box-shadow:0 0 20px rgba(229,9,20,.6)}50%{box-shadow:0 0 30px rgba(229,9,20,.95)}}