*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--neutral-900:#171717;--brand-hex:#3085cd;--brand-hover:#256ba5}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#3085cd59}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,sans-serif;background:#3085cd59;color:#fff;min-height:100vh;line-height:1.5;max-width:560px;margin:0 auto}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}button{cursor:pointer;font:inherit;border:none;background:0 0;color:inherit}

.max-w-6xl{max-width:560px}.mx-auto{margin-left:auto;margin-right:auto}.px-3{padding-left:.75rem;padding-right:.75rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-20{padding-bottom:5rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.whitespace-nowrap{white-space:nowrap}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.w-full{width:100%}.hidden{display:none !important}.block{display:block}.sticky{position:sticky}.top-0{top:0}.fixed{position:fixed}.bottom-4{bottom:1rem}.right-4{right:1rem}.z-50{z-index:50}.bg-gray-950{background-color:#171717}.text-white{color:#fff}.text-gray-300{color:#d1d5db}.text-gray-400{color:#ffffffb3}.text-orange-400{color:var(--brand-hex)}

/* === HEADER === */
.site-header{position:sticky;top:0;z-index:50;background:rgba(48,133,205,.34);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(48,133,205,.12);max-width:inherit;width:100%}
.topbar{background:0 0 !important}
.category-nav{background:0 0 !important;border-top:1px solid rgba(48,133,205,.1)}
.header-bar{width:100%;height:3rem;border-collapse:collapse}
.header-logo-cell{width:90px;vertical-align:middle;padding:0}
.header-logo-link{display:inline-flex;align-items:center;vertical-align:middle;color:#e5e7eb;transition:opacity .2s}
.header-logo-link:hover{opacity:.85}
.header-logo-text{display:block;font-size:1.25rem;font-weight:700;letter-spacing:.02em;color:var(--brand-hex);white-space:nowrap}
.header-nav-cell{text-align:right;vertical-align:middle;padding:0;font-size:.8125rem}
.nav-tab{display:inline-block;padding:.3rem .7rem;border-radius:.5rem;color:rgba(255,255,255,.7);transition:color .2s;margin-left:.375rem}
.nav-tab:hover{color:rgba(255,255,255,.95)}
.nav-tab.active{font-weight:600;color:var(--brand-hex)}
.nav-link-text{display:inline-block;padding:.3rem .4rem;color:rgba(255,255,255,.7);font-size:.75rem;transition:color .2s;margin-left:.25rem}
.nav-link-text:hover{color:#fff}
.cat-row{overflow-x:auto;white-space:nowrap;padding:.375rem 0;font-size:0}
.menu-item{display:inline-block;padding:.3rem .85rem;border-radius:9999px;color:#ffffffb3;font-size:.8375rem;font-weight:500;transition:all .15s;vertical-align:middle}
.menu-item:hover{background:rgba(255,255,255,.06);color:#fff}
.menu-item.active{background:var(--brand-hex);color:#000;font-weight:600}

/* === VIDEO CARDS === */
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.card{display:block;border-radius:.5rem;overflow:hidden;background:#ffffff0d;transition:transform .2s}
.card:hover{transform:translateY(-2px)}
.card-img-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;background:#ffffff14}
.card-img{width:100%;height:100%;object-fit:cover;transition:transform .3s,opacity .4s ease}
.card:hover .card-img{transform:scale(1.05)}
.card-badge{position:absolute;top:.5rem;left:.5rem;padding:.125rem .5rem;font-size:.75rem;background:rgba(48,133,205,.85);color:#fff;border-radius:.25rem;z-index:2}
.card-dur{position:absolute;bottom:.5rem;right:.5rem;padding:.125rem .5rem;font-size:.6875rem;background:rgba(0,0,0,.7);color:#fff;border-radius:.25rem;z-index:2}
.card-title{padding:.25rem .375rem;font-size:.75rem;max-height:calc(.75rem * 1.25 * 2 + .5rem);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;word-break:break-all;line-height:1.25}

/* === TAGS === */
.tag-badge{display:inline-block;padding:.125rem .5rem;background:#ffffff14;border-radius:9999px;font-size:.75rem;color:#d1d5db;transition:all .15s}
.tag-badge:hover{background:rgba(48,133,205,.18);color:#fff}

/* === CARD OVERLAY === */
.card-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);opacity:0;transition:opacity .2s}
.card:hover .card-overlay{opacity:1}

/* === SECTION === */
.section-title{font-size:1.125rem;font-weight:700;margin-bottom:.75rem;padding-left:.5rem;border-left:3px solid var(--brand-hex)}
.home-section{margin-bottom:1.5rem}
.headline-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}
.headline-bar .section-title{margin-bottom:0}
.more-btn{display:block;text-align:center;padding:.5rem 0;margin-top:.5rem;font-size:.875rem;color:var(--brand-hex);background:#ffffff0d;border-radius:.375rem;transition:background .15s,color .15s}
.more-btn:hover{background:rgba(48,133,205,.12);color:#fff}

/* === SEARCH === */
.search-bar{display:flex;gap:.5rem;margin-bottom:.75rem}
.search-input{flex:1;padding:.5rem .75rem;font-size:.875rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.125);border-radius:.375rem;color:#f3f4f6;outline:none}
.search-input:focus{border-color:var(--brand-hex)}
.search-btn{padding:.5rem 1rem;font-size:.875rem;background:var(--brand-hex);color:#fff;border:none;border-radius:.375rem;font-weight:600;cursor:pointer;transition:background .15s}
.search-btn:hover{background:var(--brand-hover)}

/* === HERO DETAIL === */
.vod-hero{display:flex;gap:.75rem}
.vod-cover{width:130px;aspect-ratio:2/3;border-radius:.5rem;overflow:hidden;flex-shrink:0;background:#ffffff14}
.vod-cover img{width:100%;height:100%;object-fit:cover}
.vod-info{flex:1;min-width:0}
.vod-info h1{font-size:1.125rem;line-height:1.4;margin-bottom:.5rem}
.vod-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.5rem}
.vod-tag{padding:.15rem .5rem;font-size:.6875rem;background:#ffffff0d;color:#d1d5db;border-radius:9999px}
.vod-desc{margin-top:.75rem;padding:.75rem;background:#ffffff0d;border-radius:.5rem;font-size:.8125rem;color:#d1d5db;line-height:1.7}

/* === PLAYER === */
.video-player-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:.5rem;overflow:hidden;background:#000}
#dplayer{width:100%;height:100%}

/* === PLAYLIST === */
.episode-bar{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.75rem}
.episode-btn{padding:.3rem .6rem;font-size:.75rem;background:#ffffff0d;color:#d1d5db;border:1px solid transparent;border-radius:.25rem;cursor:pointer;transition:all .15s}
.episode-btn:hover{background:#ffffff14}
.episode-btn.active{color:#fff;border-color:var(--brand-hex);background:rgba(48,133,205,.15)}

/* === ACCOUNT === */
.account-form{max-width:320px;margin:2rem auto}
.form-group{margin-bottom:.75rem}
.form-group label{display:block;font-size:.8125rem;color:#d1d5db;margin-bottom:.25rem}
.form-input{width:100%;padding:.6rem .75rem;font-size:.875rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.125);border-radius:.375rem;color:#f3f4f6;outline:none}
.form-input:focus{border-color:var(--brand-hex)}
.btn-primary{display:block;width:100%;padding:.65rem;font-size:.9375rem;background:var(--brand-hex);color:#fff;border:none;border-radius:.375rem;font-weight:600;cursor:pointer;transition:background .15s}
.btn-primary:hover{background:var(--brand-hover)}
.btn-vip{background:#ef4444}
.btn-vip:hover{background:#dc2626}

/* === FOOTER === */
.site-footer{text-align:center;padding:1.5rem .75rem;color:#6b7280;font-size:.75rem}
.site-footer .warn{color:#ef4444;font-weight:700}

/* === PLAN === */
.plan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:1rem}
.plan-card{border:1px solid rgba(255,255,255,.1);border-radius:.5rem;padding:.75rem;text-align:center;cursor:pointer;background:#ffffff0d;transition:all .15s}
.plan-card:hover,.plan-card.on{border-color:var(--brand-hex);background:rgba(48,133,205,.1)}
.plan-card .plan-price{font-size:1.125rem;font-weight:700;color:var(--brand-hex)}

/* === SKELETON === */
.skeleton{background:linear-gradient(90deg,#ffffff0d 25%,#ffffff14 50%,#ffffff0d 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.skeleton-img{aspect-ratio:16/9;border-radius:.25rem}
.skeleton-text{height:.75rem;margin:.4rem;border-radius:.25rem}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* === TRIAL OVERLAY === */
.trial-overlay{position:absolute;inset:0;background:rgba(0,0,0,.9);z-index:100;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.5rem;display:flex;align-items:flex-start;justify-content:center;border-radius:.5rem}
.trial-overlay>*{margin:auto 0}
.plan-pick{border:1px solid rgba(255,255,255,.15);border-radius:.5rem;padding:.5rem;cursor:pointer;text-align:center;font-size:.75rem;color:#ccc;background:rgba(255,255,255,.03)}
.plan-pick.on{border-color:var(--brand-hex);background:rgba(48,133,205,.12);color:#fff}
.plan-pick b{color:var(--brand-hex);font-size:.875rem}
.plan-pick small{color:#888}

/* === SUB TAGS === */
.tags-container{position:relative;padding:.4rem 0 1.4rem}
.tags-inner{overflow:hidden;transition:max-height .3s ease}
.tags-container.collapsed .tags-inner{max-height:3.6rem}
.tags-container .tags-inner{max-height:none}
.menu-item-sub{display:inline-block;padding:.15rem .5rem;border-radius:9999px;color:#ffffffb3;font-size:.6875rem;transition:all .15s;vertical-align:middle;margin:.1rem .05rem;border:1px solid transparent}
.menu-item-sub:hover{color:#f3f4f6;background:rgba(255,255,255,.08);border-color:rgba(48,133,205,.3)}
.menu-item-sub.active{color:#fff;border-color:var(--brand-hex)}
.tags-toggle{position:absolute;right:0;bottom:calc(.25rem - 2px);font-size:.6875rem;color:#fff;cursor:pointer;background:var(--brand-hex);border:none;border-radius:.25rem;padding:.125rem .5rem;transition:all .15s;z-index:2;line-height:1.4}
.tags-toggle:hover{background:var(--brand-hover)}

/* === HIDE SCROLL === */
.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.hide-scrollbar::-webkit-scrollbar{display:none}

/* === PAGINATION === */
.pagination-bar{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem;margin-bottom:.5rem;flex-wrap:wrap}
.page-btn{display:inline-block;padding:.35rem .75rem;font-size:.8125rem;border-radius:.375rem;background:rgba(48,133,205,.1);color:#d1d5db;transition:all .15s}
.page-btn:hover{background:rgba(48,133,205,.22);color:#fff}
.page-btn.disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.page-info{font-size:.8125rem;color:#ffffffb3;white-space:nowrap}
.page-jump{display:inline-flex;align-items:center;gap:.25rem}
.page-input{width:3rem;padding:.25rem .375rem;font-size:.8125rem;text-align:center;border:1px solid #ffffff20;border-radius:.25rem;background:#ffffff0d;color:#f3f4f6;outline:none}
.page-input:focus{border-color:var(--brand-hex)}
.page-go{padding:.25rem .5rem;font-size:.75rem;color:#fff;border-radius:.25rem;cursor:pointer;border:none;background:var(--brand-hex)}
.page-go:hover{background:var(--brand-hover)}