:root{--bg:#000;--text:#fff;--card:#111;--btn:#007bff;--accent:#0af;--red:#e74c3c;}
[data-theme="light"]{--bg:#f9f9f9;--text:#222;--card:#fff;--btn:#0069d9;--accent:#007bff;--red:#c0392b;}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,sans-serif;transition:0.3s;overflow-x:hidden;}
.container{max-width:800px;margin:0 auto;padding:10px 15px;box-sizing:border-box;}
h1{font-size:20px;margin:12px 0;text-align:center;color:var(--text);}
#vodName{font-size:18px;margin:10px 0;text-align:center;color:var(--text);font-weight:normal;}
#posterBox{position:relative;display:block;margin:0 auto 15px;cursor:pointer;width:fit-content;}
#poster{width:100%;max-width:100%;height:auto;border-radius:14px;box-shadow:0 6px 25px rgba(0,170,255,0.4);transition:0.3s;}
#poster:hover{transform:scale(1.02);}
#playIcon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--accent);
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: all 0.3s;
}
#posterBox:hover #playIcon{
    transform: translate(-50%, -50%) scale(1.1);
}
#video{width:100%;border-radius:14px;display:none;margin:10px 0 8px;box-shadow:0 6px 20px rgba(0,0,0,0.6);}
#changeBtns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:15px 0;}
#changeBtns button{flex:1;max-width:300px;padding:12px;font-size:16px;background:var(--btn);border:none;border-radius:10px;color:#fff;cursor:pointer;box-shadow:0 3px 6px rgba(0,0,0,0.4);transition:0.2s;}
#changeBtns button:hover{box-shadow:0 6px 12px rgba(0,0,0,0.5);}
#searchBox{background:var(--card);padding:15px;border-radius:14px;margin:15px 0;box-shadow:0 4px 15px rgba(0,0,0,0.3);}
#searchInputBox{display:flex;gap:10px;align-items:center;}
#urlInput{flex:1;padding:12px;font-size:15px;border:none;border-radius:10px;background:rgba(255,255,255,0.1);color:var(--text);}
#urlInput::placeholder{color:#888;}
#searchBtns button{padding:12px 18px;font-size:15px;background:var(--btn);color:#fff;border:none;border-radius:10px;min-width:80px;cursor:pointer;box-shadow:0 3px 6px rgba(0,0,0,0.3);transition:0.2s;}
#searchBtns button:hover{box-shadow:0 6px 12px rgba(0,0,0,0.5);}
.search-results,.history{margin:15px 0;padding:0;background:var(--card);border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,0.3);}
.module-header{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;cursor:pointer;user-select:none;}
.module-header h3{margin:0;font-size:17px;}
.clear-btn{padding:5px 12px;font-size:13px;background:var(--red);color:#fff;border:none;border-radius:6px;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,0.3);}
.result-item{display:flex;align-items:center;padding:10px;background:rgba(255,255,255,0.05);margin:6px 12px;border-radius:10px;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.2);transition:0.2s;}
.result-item:hover{background:rgba(255,255,255,0.12);transform:translateY(-2px);}
.result-item img{width:60px;height:90px;object-fit:cover;margin-right:12px;border-radius:6px;}
#playerControls{background:var(--card);padding:10px 12px;border-radius:12px;margin:15px 0;}
select,#episodeList button{margin:4px;padding:8px 12px;font-size:14px;border-radius:6px;background:#333;color:#fff;border:none;}
.active{background:var(--accent)!important;color:#000!important;}
.pagination{display:flex;justify-content:center;align-items:center;margin:8px 0;flex-wrap:wrap;}
.pagination button{padding:4px 8px;margin:2px;font-size:14px;border-radius:6px;background:#333;color:#fff;border:none;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,0.3);transition:0.2s;}
.pagination button:hover{background:var(--accent);color:#000;box-shadow:0 4px 8px rgba(0,0,0,0.4);}

#historyPagination {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
    padding: 0 8px;
}
#historyList:not([style*="max-height: 0"]) ~ #historyPagination {
    height: 50px;
}

.collapsible-list{overflow:hidden;max-height:0;transition:max-height 0.35s ease;}

@media (max-width:768px){
    #changeBtns{flex-direction:column;}#changeBtns button{max-width:none;}
    #searchInputBox{flex-direction:column;}#searchBtns{display:flex;gap:8px;width:100%;}#searchBtns button{flex:1;}
    .result-item{padding:8px;margin:4px 8px;}
}
@media (max-width: 768px) {
    #changeBtns {
        flex-direction: row !important;
        gap: 12px !important;
        padding: 0 15px;
        margin: 15px 0;
    }
    #changeBtns button {
        flex: 1;
        max-width: none !important;
        padding: 14px 10px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
    }
}